@marcoschwartz/lite-ui 0.17.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +16 -5
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +16 -5
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -80,6 +80,7 @@ interface AppShellProps {
80
80
  width?: 'sm' | 'md' | 'lg';
81
81
  breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
82
82
  position?: 'side' | 'top';
83
+ variant?: 'solid' | 'glass' | 'transparent';
83
84
  };
84
85
  header?: React.ReactNode;
85
86
  navbarTitle?: string;
package/dist/index.d.ts CHANGED
@@ -80,6 +80,7 @@ interface AppShellProps {
80
80
  width?: 'sm' | 'md' | 'lg';
81
81
  breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
82
82
  position?: 'side' | 'top';
83
+ variant?: 'solid' | 'glass' | 'transparent';
83
84
  };
84
85
  header?: React.ReactNode;
85
86
  navbarTitle?: string;
package/dist/index.js CHANGED
@@ -615,7 +615,7 @@ var Navbar = ({
615
615
  }) => {
616
616
  const { theme } = useTheme();
617
617
  const baseClasses = sticky ? "sticky top-0 z-40" : "";
618
- const getVariantClasses = () => {
618
+ const getVariantClasses2 = () => {
619
619
  switch (variant) {
620
620
  case "glass":
621
621
  return "bg-transparent backdrop-blur-xl";
@@ -626,7 +626,7 @@ var Navbar = ({
626
626
  return "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700";
627
627
  }
628
628
  };
629
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `${getVariantClasses()} ${baseClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
629
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `${getVariantClasses2()} ${baseClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
630
630
  logo && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center", children: logo }),
631
631
  children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-6", children })
632
632
  ] }) }) });
@@ -1245,6 +1245,17 @@ var breakpointClasses = {
1245
1245
  lg: "lg",
1246
1246
  xl: "xl"
1247
1247
  };
1248
+ var getVariantClasses = (variant) => {
1249
+ switch (variant) {
1250
+ case "glass":
1251
+ return "bg-transparent backdrop-blur-xl";
1252
+ case "transparent":
1253
+ return "bg-transparent";
1254
+ case "solid":
1255
+ default:
1256
+ return "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700";
1257
+ }
1258
+ };
1248
1259
  var AppShell = ({
1249
1260
  children,
1250
1261
  navbar,
@@ -1281,7 +1292,7 @@ var AppShell = ({
1281
1292
  const mobileMenuClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
1282
1293
  const desktopNavClass = navbarBreakpoint === "sm" ? "sm:flex" : navbarBreakpoint === "md" ? "md:flex" : navbarBreakpoint === "lg" ? "lg:flex" : "xl:flex";
1283
1294
  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
1284
- /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("nav", { className: "sticky top-0 z-30 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
1295
+ /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("nav", { className: `sticky top-0 z-30 ${getVariantClasses(navbar.variant)}`, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
1285
1296
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center", children: navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null }),
1286
1297
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `hidden ${desktopNavClass} items-center gap-6`, children: navbar.content }),
1287
1298
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
@@ -1335,7 +1346,7 @@ var AppShell = ({
1335
1346
  const mobileDrawerClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
1336
1347
  const sidebarWidthClass = navbarWidth === "sm" ? "w-48" : navbarWidth === "lg" ? "w-80" : "w-64";
1337
1348
  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
1338
- /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("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: [
1349
+ /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `${mobileHeaderClass} sticky top-0 z-30 ${getVariantClasses(navbar.variant)} px-4 py-3 flex items-center justify-between`, children: [
1339
1350
  navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
1340
1351
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1341
1352
  "button",
@@ -1349,7 +1360,7 @@ var AppShell = ({
1349
1360
  ] }),
1350
1361
  header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full", children: header }),
1351
1362
  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-1 min-h-0", children: [
1352
- /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("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 }),
1363
+ /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("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 }),
1353
1364
  isMobileNavbarOpen && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
1354
1365
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1355
1366
  "div",