@marcoschwartz/lite-ui 0.16.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 (8) hide show
  1. package/dist/index.d.mts +2 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +28 -5
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +28 -5
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -46,6 +46,7 @@ interface NavbarProps {
46
46
  children?: React.ReactNode;
47
47
  className?: string;
48
48
  sticky?: boolean;
49
+ variant?: 'solid' | 'glass' | 'transparent';
49
50
  }
50
51
  declare const Navbar: React.FC<NavbarProps>;
51
52
 
@@ -79,6 +80,7 @@ interface AppShellProps {
79
80
  width?: 'sm' | 'md' | 'lg';
80
81
  breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
81
82
  position?: 'side' | 'top';
83
+ variant?: 'solid' | 'glass' | 'transparent';
82
84
  };
83
85
  header?: React.ReactNode;
84
86
  navbarTitle?: string;
package/dist/index.d.ts CHANGED
@@ -46,6 +46,7 @@ interface NavbarProps {
46
46
  children?: React.ReactNode;
47
47
  className?: string;
48
48
  sticky?: boolean;
49
+ variant?: 'solid' | 'glass' | 'transparent';
49
50
  }
50
51
  declare const Navbar: React.FC<NavbarProps>;
51
52
 
@@ -79,6 +80,7 @@ interface AppShellProps {
79
80
  width?: 'sm' | 'md' | 'lg';
80
81
  breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
81
82
  position?: 'side' | 'top';
83
+ variant?: 'solid' | 'glass' | 'transparent';
82
84
  };
83
85
  header?: React.ReactNode;
84
86
  navbarTitle?: string;
package/dist/index.js CHANGED
@@ -610,11 +610,23 @@ var Navbar = ({
610
610
  logo,
611
611
  children,
612
612
  className = "",
613
- sticky = false
613
+ sticky = false,
614
+ variant = "solid"
614
615
  }) => {
615
616
  const { theme } = useTheme();
616
617
  const baseClasses = sticky ? "sticky top-0 z-40" : "";
617
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 ${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: [
618
+ const getVariantClasses2 = () => {
619
+ switch (variant) {
620
+ case "glass":
621
+ return "bg-transparent backdrop-blur-xl";
622
+ case "transparent":
623
+ return "bg-transparent";
624
+ case "solid":
625
+ default:
626
+ return "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700";
627
+ }
628
+ };
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: [
618
630
  logo && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center", children: logo }),
619
631
  children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-6", children })
620
632
  ] }) }) });
@@ -1233,6 +1245,17 @@ var breakpointClasses = {
1233
1245
  lg: "lg",
1234
1246
  xl: "xl"
1235
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
+ };
1236
1259
  var AppShell = ({
1237
1260
  children,
1238
1261
  navbar,
@@ -1269,7 +1292,7 @@ var AppShell = ({
1269
1292
  const mobileMenuClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
1270
1293
  const desktopNavClass = navbarBreakpoint === "sm" ? "sm:flex" : navbarBreakpoint === "md" ? "md:flex" : navbarBreakpoint === "lg" ? "lg:flex" : "xl:flex";
1271
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: [
1272
- /* @__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: [
1273
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 }),
1274
1297
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `hidden ${desktopNavClass} items-center gap-6`, children: navbar.content }),
1275
1298
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
@@ -1323,7 +1346,7 @@ var AppShell = ({
1323
1346
  const mobileDrawerClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
1324
1347
  const sidebarWidthClass = navbarWidth === "sm" ? "w-48" : navbarWidth === "lg" ? "w-80" : "w-64";
1325
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: [
1326
- /* @__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: [
1327
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,
1328
1351
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1329
1352
  "button",
@@ -1337,7 +1360,7 @@ var AppShell = ({
1337
1360
  ] }),
1338
1361
  header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "w-full", children: header }),
1339
1362
  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-1 min-h-0", children: [
1340
- /* @__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 }),
1341
1364
  isMobileNavbarOpen && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
1342
1365
  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
1343
1366
  "div",