@opensite/ui 0.9.6 → 0.9.8

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.
@@ -1238,61 +1238,126 @@ var DesktopMenuItem = ({
1238
1238
  ] }) })
1239
1239
  ] }, `desktop-menu-item-${index}`);
1240
1240
  }
1241
- if (layout === "simple-grid" && link.links) {
1241
+ if (layout === "simple-grid" && (link.links || link.dropdownGroups)) {
1242
+ const allLinks = link.dropdownGroups ? link.dropdownGroups.flatMap((group) => group.links || []) : link.links || [];
1242
1243
  return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
1243
1244
  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: link.label }),
1244
- /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1245
- NavigationMenuLink,
1246
- {
1247
- href: getLinkUrl(item),
1248
- className: "flex w-full flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
1249
- children: [
1250
- item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
1251
- img.Img,
1252
- {
1253
- src: item.image,
1254
- alt: typeof item.label === "string" ? item.label : "Menu item",
1255
- className: "h-full w-full object-cover object-center",
1256
- optixFlowConfig
1257
- }
1258
- ) }),
1259
- !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
1260
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
1261
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
1262
- item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
1263
- ] })
1264
- ]
1265
- },
1266
- `grid-item-${itemIndex}`
1267
- )) }) })
1245
+ /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: link.dropdownGroups ? (
1246
+ // Render with group headers
1247
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: link.dropdownGroups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1248
+ group.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-xs font-medium tracking-wider uppercase text-muted-foreground", children: group.label }),
1249
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: (group.links || []).map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1250
+ NavigationMenuLink,
1251
+ {
1252
+ href: getLinkUrl(item),
1253
+ className: "flex w-full flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
1254
+ children: [
1255
+ item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
1256
+ img.Img,
1257
+ {
1258
+ src: item.image,
1259
+ alt: typeof item.label === "string" ? item.label : "Menu item",
1260
+ className: "h-full w-full object-cover object-center",
1261
+ optixFlowConfig
1262
+ }
1263
+ ) }),
1264
+ !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
1265
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
1266
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
1267
+ item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
1268
+ ] })
1269
+ ]
1270
+ },
1271
+ `grid-item-${groupIndex}-${itemIndex}`
1272
+ )) })
1273
+ ] }, `group-${groupIndex}`)) })
1274
+ ) : (
1275
+ // Render without groups
1276
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: allLinks.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
1277
+ NavigationMenuLink,
1278
+ {
1279
+ href: getLinkUrl(item),
1280
+ className: "flex w-full flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
1281
+ children: [
1282
+ item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
1283
+ img.Img,
1284
+ {
1285
+ src: item.image,
1286
+ alt: typeof item.label === "string" ? item.label : "Menu item",
1287
+ className: "h-full w-full object-cover object-center",
1288
+ optixFlowConfig
1289
+ }
1290
+ ) }),
1291
+ !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
1292
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
1293
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
1294
+ item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
1295
+ ] })
1296
+ ]
1297
+ },
1298
+ `grid-item-${itemIndex}`
1299
+ )) })
1300
+ ) })
1268
1301
  ] }, `desktop-menu-item-${index}`);
1269
1302
  }
1270
- if (layout === "list-with-icons" && link.links) {
1303
+ if (layout === "list-with-icons" && (link.links || link.dropdownGroups)) {
1304
+ const allLinks = link.dropdownGroups ? link.dropdownGroups.flatMap((group) => group.links || []) : link.links || [];
1271
1305
  return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
1272
1306
  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: link.label }),
1273
- /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
1274
- NavigationMenuLink,
1275
- {
1276
- href: getLinkUrl(item),
1277
- className: "flex w-full items-start gap-3 rounded-lg p-3 hover:bg-muted",
1278
- children: [
1279
- item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
1280
- img.Img,
1281
- {
1282
- src: item.image,
1283
- alt: typeof item.label === "string" ? item.label : "Menu item",
1284
- className: "h-full w-full object-cover object-center",
1285
- optixFlowConfig
1286
- }
1287
- ) }),
1288
- !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
1289
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
1290
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
1291
- item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
1292
- ] })
1293
- ]
1294
- }
1295
- ) }, `list-item-${itemIndex}`)) }) })
1307
+ /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: link.dropdownGroups ? (
1308
+ // Render with group headers
1309
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: link.dropdownGroups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1310
+ group.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-medium tracking-wider uppercase text-muted-foreground", children: group.label }),
1311
+ /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: (group.links || []).map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
1312
+ NavigationMenuLink,
1313
+ {
1314
+ href: getLinkUrl(item),
1315
+ className: "flex w-full items-start gap-3 rounded-lg p-3 hover:bg-muted",
1316
+ children: [
1317
+ item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
1318
+ img.Img,
1319
+ {
1320
+ src: item.image,
1321
+ alt: typeof item.label === "string" ? item.label : "Menu item",
1322
+ className: "h-full w-full object-cover object-center",
1323
+ optixFlowConfig
1324
+ }
1325
+ ) }),
1326
+ !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
1327
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
1328
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
1329
+ item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
1330
+ ] })
1331
+ ]
1332
+ }
1333
+ ) }, `list-item-${groupIndex}-${itemIndex}`)) })
1334
+ ] }, `group-${groupIndex}`)) })
1335
+ ) : (
1336
+ // Render without groups
1337
+ /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: allLinks.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
1338
+ NavigationMenuLink,
1339
+ {
1340
+ href: getLinkUrl(item),
1341
+ className: "flex w-full items-start gap-3 rounded-lg p-3 hover:bg-muted",
1342
+ children: [
1343
+ item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
1344
+ img.Img,
1345
+ {
1346
+ src: item.image,
1347
+ alt: typeof item.label === "string" ? item.label : "Menu item",
1348
+ className: "h-full w-full object-cover object-center",
1349
+ optixFlowConfig
1350
+ }
1351
+ ) }),
1352
+ !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
1353
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
1354
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
1355
+ item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
1356
+ ] })
1357
+ ]
1358
+ }
1359
+ ) }, `list-item-${itemIndex}`)) })
1360
+ ) })
1296
1361
  ] }, `desktop-menu-item-${index}`);
1297
1362
  }
1298
1363
  if (link.href) {
@@ -1369,7 +1434,9 @@ var NavbarMegaMenu = ({
1369
1434
  const [open, setOpen] = React.useState(false);
1370
1435
  const [submenuIndex, setSubmenuIndex] = React.useState(null);
1371
1436
  const activeSubmenu = submenuIndex !== null ? menuLinks?.[submenuIndex] : null;
1372
- const hasDropdownItems = (link) => Boolean(link.links?.length || link.dropdownGroups?.length);
1437
+ const hasDropdownItems = (link) => Boolean(
1438
+ link.links && link.links.length > 0 || link.dropdownGroups && link.dropdownGroups.length > 0
1439
+ );
1373
1440
  const renderActions = () => {
1374
1441
  if (!actions || actions.length === 0) return null;
1375
1442
  return actions.map((action, index) => {
@@ -1216,61 +1216,126 @@ var DesktopMenuItem = ({
1216
1216
  ] }) })
1217
1217
  ] }, `desktop-menu-item-${index}`);
1218
1218
  }
1219
- if (layout === "simple-grid" && link.links) {
1219
+ if (layout === "simple-grid" && (link.links || link.dropdownGroups)) {
1220
+ const allLinks = link.dropdownGroups ? link.dropdownGroups.flatMap((group) => group.links || []) : link.links || [];
1220
1221
  return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
1221
1222
  /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: link.label }),
1222
- /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: /* @__PURE__ */ jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxs(
1223
- NavigationMenuLink,
1224
- {
1225
- href: getLinkUrl(item),
1226
- className: "flex w-full flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
1227
- children: [
1228
- item.image && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
1229
- Img,
1230
- {
1231
- src: item.image,
1232
- alt: typeof item.label === "string" ? item.label : "Menu item",
1233
- className: "h-full w-full object-cover object-center",
1234
- optixFlowConfig
1235
- }
1236
- ) }),
1237
- !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
1238
- /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
1239
- /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
1240
- item.description && /* @__PURE__ */ jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
1241
- ] })
1242
- ]
1243
- },
1244
- `grid-item-${itemIndex}`
1245
- )) }) })
1223
+ /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: link.dropdownGroups ? (
1224
+ // Render with group headers
1225
+ /* @__PURE__ */ jsx("div", { className: "space-y-6", children: link.dropdownGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [
1226
+ group.label && /* @__PURE__ */ jsx("div", { className: "mb-3 text-xs font-medium tracking-wider uppercase text-muted-foreground", children: group.label }),
1227
+ /* @__PURE__ */ jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: (group.links || []).map((item, itemIndex) => /* @__PURE__ */ jsxs(
1228
+ NavigationMenuLink,
1229
+ {
1230
+ href: getLinkUrl(item),
1231
+ className: "flex w-full flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
1232
+ children: [
1233
+ item.image && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
1234
+ Img,
1235
+ {
1236
+ src: item.image,
1237
+ alt: typeof item.label === "string" ? item.label : "Menu item",
1238
+ className: "h-full w-full object-cover object-center",
1239
+ optixFlowConfig
1240
+ }
1241
+ ) }),
1242
+ !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
1243
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
1244
+ /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
1245
+ item.description && /* @__PURE__ */ jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
1246
+ ] })
1247
+ ]
1248
+ },
1249
+ `grid-item-${groupIndex}-${itemIndex}`
1250
+ )) })
1251
+ ] }, `group-${groupIndex}`)) })
1252
+ ) : (
1253
+ // Render without groups
1254
+ /* @__PURE__ */ jsx("div", { className: "grid auto-rows-fr grid-cols-1 gap-4 sm:grid-cols-2", children: allLinks.map((item, itemIndex) => /* @__PURE__ */ jsxs(
1255
+ NavigationMenuLink,
1256
+ {
1257
+ href: getLinkUrl(item),
1258
+ className: "flex w-full flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
1259
+ children: [
1260
+ item.image && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
1261
+ Img,
1262
+ {
1263
+ src: item.image,
1264
+ alt: typeof item.label === "string" ? item.label : "Menu item",
1265
+ className: "h-full w-full object-cover object-center",
1266
+ optixFlowConfig
1267
+ }
1268
+ ) }),
1269
+ !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
1270
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
1271
+ /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
1272
+ item.description && /* @__PURE__ */ jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
1273
+ ] })
1274
+ ]
1275
+ },
1276
+ `grid-item-${itemIndex}`
1277
+ )) })
1278
+ ) })
1246
1279
  ] }, `desktop-menu-item-${index}`);
1247
1280
  }
1248
- if (layout === "list-with-icons" && link.links) {
1281
+ if (layout === "list-with-icons" && (link.links || link.dropdownGroups)) {
1282
+ const allLinks = link.dropdownGroups ? link.dropdownGroups.flatMap((group) => group.links || []) : link.links || [];
1249
1283
  return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
1250
1284
  /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal hover:bg-muted focus:bg-muted data-[state=open]:bg-muted/50", children: link.label }),
1251
- /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxs(
1252
- NavigationMenuLink,
1253
- {
1254
- href: getLinkUrl(item),
1255
- className: "flex w-full items-start gap-3 rounded-lg p-3 hover:bg-muted",
1256
- children: [
1257
- item.image && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
1258
- Img,
1259
- {
1260
- src: item.image,
1261
- alt: typeof item.label === "string" ? item.label : "Menu item",
1262
- className: "h-full w-full object-cover object-center",
1263
- optixFlowConfig
1264
- }
1265
- ) }),
1266
- !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
1267
- /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
1268
- /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
1269
- item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
1270
- ] })
1271
- ]
1272
- }
1273
- ) }, `list-item-${itemIndex}`)) }) })
1285
+ /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: link.dropdownGroups ? (
1286
+ // Render with group headers
1287
+ /* @__PURE__ */ jsx("div", { className: "space-y-4", children: link.dropdownGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [
1288
+ group.label && /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-medium tracking-wider uppercase text-muted-foreground", children: group.label }),
1289
+ /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: (group.links || []).map((item, itemIndex) => /* @__PURE__ */ jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxs(
1290
+ NavigationMenuLink,
1291
+ {
1292
+ href: getLinkUrl(item),
1293
+ className: "flex w-full items-start gap-3 rounded-lg p-3 hover:bg-muted",
1294
+ children: [
1295
+ item.image && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
1296
+ Img,
1297
+ {
1298
+ src: item.image,
1299
+ alt: typeof item.label === "string" ? item.label : "Menu item",
1300
+ className: "h-full w-full object-cover object-center",
1301
+ optixFlowConfig
1302
+ }
1303
+ ) }),
1304
+ !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
1305
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
1306
+ /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
1307
+ item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
1308
+ ] })
1309
+ ]
1310
+ }
1311
+ ) }, `list-item-${groupIndex}-${itemIndex}`)) })
1312
+ ] }, `group-${groupIndex}`)) })
1313
+ ) : (
1314
+ // Render without groups
1315
+ /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: allLinks.map((item, itemIndex) => /* @__PURE__ */ jsx("li", { className: "w-full", children: /* @__PURE__ */ jsxs(
1316
+ NavigationMenuLink,
1317
+ {
1318
+ href: getLinkUrl(item),
1319
+ className: "flex w-full items-start gap-3 rounded-lg p-3 hover:bg-muted",
1320
+ children: [
1321
+ item.image && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
1322
+ Img,
1323
+ {
1324
+ src: item.image,
1325
+ alt: typeof item.label === "string" ? item.label : "Menu item",
1326
+ className: "h-full w-full object-cover object-center",
1327
+ optixFlowConfig
1328
+ }
1329
+ ) }),
1330
+ !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
1331
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
1332
+ /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
1333
+ item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
1334
+ ] })
1335
+ ]
1336
+ }
1337
+ ) }, `list-item-${itemIndex}`)) })
1338
+ ) })
1274
1339
  ] }, `desktop-menu-item-${index}`);
1275
1340
  }
1276
1341
  if (link.href) {
@@ -1347,7 +1412,9 @@ var NavbarMegaMenu = ({
1347
1412
  const [open, setOpen] = useState(false);
1348
1413
  const [submenuIndex, setSubmenuIndex] = useState(null);
1349
1414
  const activeSubmenu = submenuIndex !== null ? menuLinks?.[submenuIndex] : null;
1350
- const hasDropdownItems = (link) => Boolean(link.links?.length || link.dropdownGroups?.length);
1415
+ const hasDropdownItems = (link) => Boolean(
1416
+ link.links && link.links.length > 0 || link.dropdownGroups && link.dropdownGroups.length > 0
1417
+ );
1351
1418
  const renderActions = () => {
1352
1419
  if (!actions || actions.length === 0) return null;
1353
1420
  return actions.map((action, index) => {