@marcoschwartz/lite-ui 0.16.0 → 0.18.0

package/dist/index.mjs

@@ -459,11 +459,23 @@ var Navbar = ({
   logo,
   children,
   className = "",
-  sticky = false
+  sticky = false,
+  variant = "solid"
 }) => {
   const { theme } = useTheme();
   const baseClasses = sticky ? "sticky top-0 z-40" : "";
-  return /* @__PURE__ */ jsx5("nav", { className: `bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 ${baseClasses} ${className}`, children: /* @__PURE__ */ jsx5("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center h-16", children: [
+  const getVariantClasses2 = () => {
+    switch (variant) {
+      case "glass":
+        return "bg-transparent backdrop-blur-xl";
+      case "transparent":
+        return "bg-transparent";
+      case "solid":
+      default:
+        return "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700";
+    }
+  };
+  return /* @__PURE__ */ jsx5("nav", { className: `${getVariantClasses2()} ${baseClasses} ${className}`, children: /* @__PURE__ */ jsx5("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center h-16", children: [
     logo && /* @__PURE__ */ jsx5("div", { className: "flex items-center", children: logo }),
     children && /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-6", children })
   ] }) }) });
@@ -1082,6 +1094,17 @@ var breakpointClasses = {
   lg: "lg",
   xl: "xl"
 };
+var getVariantClasses = (variant) => {
+  switch (variant) {
+    case "glass":
+      return "bg-transparent backdrop-blur-xl";
+    case "transparent":
+      return "bg-transparent";
+    case "solid":
+    default:
+      return "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700";
+  }
+};
 var AppShell = ({
   children,
   navbar,
@@ -1118,7 +1141,7 @@ var AppShell = ({
     const mobileMenuClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
     const desktopNavClass = navbarBreakpoint === "sm" ? "sm:flex" : navbarBreakpoint === "md" ? "md:flex" : navbarBreakpoint === "lg" ? "lg:flex" : "xl:flex";
     return /* @__PURE__ */ jsxs9("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
-      /* @__PURE__ */ jsx78("nav", { className: "sticky top-0 z-30 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx78("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs9("div", { className: "flex justify-between items-center h-16", children: [
+      /* @__PURE__ */ jsx78("nav", { className: `sticky top-0 z-30 ${getVariantClasses(navbar.variant)}`, children: /* @__PURE__ */ jsx78("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs9("div", { className: "flex justify-between items-center h-16", children: [
         /* @__PURE__ */ jsx78("div", { className: "flex items-center", children: navbarLogo ? /* @__PURE__ */ jsx78("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ jsx78("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null }),
         /* @__PURE__ */ jsx78("div", { className: `hidden ${desktopNavClass} items-center gap-6`, children: navbar.content }),
         /* @__PURE__ */ jsx78(
@@ -1172,7 +1195,7 @@ var AppShell = ({
     const mobileDrawerClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
     const sidebarWidthClass = navbarWidth === "sm" ? "w-48" : navbarWidth === "lg" ? "w-80" : "w-64";
     return /* @__PURE__ */ jsxs9("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
-      /* @__PURE__ */ jsxs9("div", { className: `${mobileHeaderClass} sticky top-0 z-30 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between`, children: [
+      /* @__PURE__ */ jsxs9("div", { className: `${mobileHeaderClass} sticky top-0 z-30 ${getVariantClasses(navbar.variant)} px-4 py-3 flex items-center justify-between`, children: [
         navbarLogo ? /* @__PURE__ */ jsx78("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ jsx78("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
         /* @__PURE__ */ jsx78(
           "button",
@@ -1186,7 +1209,7 @@ var AppShell = ({
       ] }),
       header && /* @__PURE__ */ jsx78("div", { className: "w-full", children: header }),
       /* @__PURE__ */ jsxs9("div", { className: "flex flex-1 min-h-0", children: [
-        /* @__PURE__ */ jsx78("aside", { className: `hidden ${desktopNavbarClass} ${sidebarWidthClass} bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto shrink-0`, children: navbar.content }),
+        /* @__PURE__ */ jsx78("aside", { className: `hidden ${desktopNavbarClass} ${sidebarWidthClass} ${navbar.variant === "glass" ? "bg-transparent backdrop-blur-xl" : navbar.variant === "transparent" ? "bg-transparent" : "bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700"} overflow-y-auto shrink-0`, children: navbar.content }),
         isMobileNavbarOpen && /* @__PURE__ */ jsxs9(Fragment11, { children: [
           /* @__PURE__ */ jsx78(
             "div",