negodesign 0.0.66 → 0.0.68

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 (13) hide show
  1. package/dist/components/core/nav/ui/ComplexMenu.svelte +15 -18
  2. package/dist/components/core/nav/ui/mobile/ComplexMenuMobile.svelte +41 -14
  3. package/dist/components/core/nav/ui/shared/MenuListItem.svelte +25 -34
  4. package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItemGrid.svelte +1 -1
  5. package/dist/components/core/nav/ui/shared/navigation/NavDropdown.svelte +78 -0
  6. package/dist/components/core/nav/ui/shared/navigation/NavDropdown.svelte.d.ts +9 -0
  7. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItem.svelte +8 -9
  8. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemCard.svelte +30 -44
  9. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemGrid.svelte +12 -14
  10. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemList.svelte +15 -18
  11. package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItems.svelte +15 -15
  12. package/dist/globals.css +12 -3
  13. package/package.json +1 -1
package/dist/components/core/nav/ui/ComplexMenu.svelte CHANGED
@@ -1,5 +1,4 @@
1
1
  <script lang="ts">
2
- import * as NavigationMenu from "../../../ui/navigation-menu/index.js";
3
2
  import type { ComplexMenuProps } from "../data/types";
4
3
  import {
5
4
  isCard,
@@ -17,20 +16,18 @@
17
16
  let { menus: links, textClass }: ComplexMenuProps = $props();
18
17
  </script>
19
18
 
20
- <NavigationMenu.Root viewport={true}>
21
- <NavigationMenu.List class="flex-wrap {textClass}">
22
- {#each links as link, i (i)}
23
- {#if isCard(link)}
24
- <NavigationMenuItemCard {...link} />
25
- {:else if isGrid(link)}
26
- <NavigationMenuItemGrid {...link} />
27
- {:else if isList(link)}
28
- <NavigationMenuItemList {...link} />
29
- {:else if isItems(link)}
30
- <NavigationMenuItems {...link} />
31
- {:else if isItem(link)}
32
- <NavigationMenuItem {...link} />
33
- {/if}
34
- {/each}
35
- </NavigationMenu.List>
36
- </NavigationMenu.Root>
19
+ <ul class="flex list-none flex-1 flex-wrap items-center justify-center {textClass}">
20
+ {#each links as link, i (i)}
21
+ {#if isCard(link)}
22
+ <NavigationMenuItemCard {...link} />
23
+ {:else if isGrid(link)}
24
+ <NavigationMenuItemGrid {...link} />
25
+ {:else if isList(link)}
26
+ <NavigationMenuItemList {...link} />
27
+ {:else if isItems(link)}
28
+ <NavigationMenuItems {...link} />
29
+ {:else if isItem(link)}
30
+ <NavigationMenuItem {...link} />
31
+ {/if}
32
+ {/each}
33
+ </ul>
package/dist/components/core/nav/ui/mobile/ComplexMenuMobile.svelte CHANGED
@@ -21,9 +21,18 @@
21
21
  let { menus: links }: ComplexMenuProps = $props();
22
22
  </script>
23
23
 
24
- {#snippet headerSnippet(header: NonNullable<NavigationMenuItemCardProps["header"]>)}
25
- <div class="mt-4 mb-2 text-lg font-medium {header.labelClass}">{header.label}</div>
26
- <p class="text-sm leading-tight {header.descriptionClass || 'text-muted-foreground'}">{header.description}</p>
24
+ {#snippet headerSnippet(
25
+ header: NonNullable<NavigationMenuItemCardProps["header"]>,
26
+ )}
27
+ <div class="mt-4 mb-2 text-lg font-medium {header.labelClass}">
28
+ {header.label}
29
+ </div>
30
+ <p
31
+ class="text-sm leading-tight {header.descriptionClass ||
32
+ 'text-muted-foreground'}"
33
+ >
34
+ {header.description}
35
+ </p>
27
36
  {/snippet}
28
37
 
29
38
  <MenuMobile>
@@ -34,8 +43,19 @@
34
43
  <CollapsibleNavMenu label={card.label ?? card.header?.label ?? ""}>
35
44
  <ul class="grid gap-2 p-2">
36
45
  {#if card.header}
37
- <li class="relative row-span-3" style={card.header.imgUrl ? `background-image: url(${card.header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;` : ""}>
38
- <a href={card.header.href ?? "#"} class="flex h-full w-full flex-col justify-end p-4 {card.header.imgUrl ? "no-underline outline-hidden select-none" : "bg-linear-to-b from-muted/50 to-muted rounded-md"}">
46
+ <li
47
+ class="relative row-span-3"
48
+ style={card.header.imgUrl
49
+ ? `background-image: url(${card.header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
50
+ : ""}
51
+ >
52
+ <a
53
+ href={card.header.href ?? "#"}
54
+ class="flex h-full w-full flex-col justify-end p-4 {card
55
+ .header.imgUrl
56
+ ? 'no-underline outline-hidden select-none'
57
+ : 'bg-linear-to-b from-muted/50 to-muted rounded-md'}"
58
+ >
39
59
  {@render headerSnippet(card.header)}
40
60
  </a>
41
61
  </li>
@@ -47,49 +67,56 @@
47
67
  {/if}
48
68
  </ul>
49
69
  </CollapsibleNavMenu>
50
-
51
70
  {:else if isGrid(link)}
52
71
  {@const grid = link as NavigationMenuItemGridProps}
53
72
  <CollapsibleNavMenu label={grid.label}>
54
- <ul class="grid grid-cols-2 gap-2 p-2">
73
+ <ul class="grid grid-cols-2 gap-2 max-h-37.5 overflow-y-auto p-2">
55
74
  {#each grid.grids ?? [] as item, j (j)}
56
75
  <NavMenuItem {...item} />
57
76
  {/each}
58
77
  </ul>
59
78
  </CollapsibleNavMenu>
60
-
61
79
  {:else if isList(link)}
62
80
  {@const list = link as NavigationMenuItemListProps}
63
81
  <CollapsibleNavMenu label={list.label}>
64
82
  <ul class="grid gap-4 p-2">
65
83
  {#each list.list ?? [] as item, j (j)}
66
84
  <li>
67
- <a href={item.href} class="block rounded-md p-2 no-underline hover:bg-accent">
85
+ <a
86
+ href={item.href}
87
+ class="block rounded-md p-2 no-underline hover:bg-accent"
88
+ >
68
89
  <div class="font-medium">{item.title ?? ""}</div>
69
- <div class="text-sm text-muted-foreground">{item.content}</div>
90
+ <div class="text-sm text-muted-foreground">
91
+ {item.content}
92
+ </div>
70
93
  </a>
71
94
  </li>
72
95
  {/each}
73
96
  </ul>
74
97
  </CollapsibleNavMenu>
75
-
76
98
  {:else if isItems(link)}
77
99
  {@const items = link as NavigationMenuItemsProps}
78
100
  <CollapsibleNavMenu label={items.label}>
79
101
  <ul class="grid min-w-50 gap-4 p-2">
80
102
  {#each items.items ?? [] as item, j (j)}
81
103
  <li>
82
- <a href={item.href} class="block rounded-md px-3 py-2 text-sm font-medium no-underline hover:bg-accent">
104
+ <a
105
+ href={item.href}
106
+ class="block rounded-md px-3 py-2 text-sm font-medium no-underline hover:bg-accent"
107
+ >
83
108
  {item.title}
84
109
  </a>
85
110
  </li>
86
111
  {/each}
87
112
  </ul>
88
113
  </CollapsibleNavMenu>
89
-
90
114
  {:else if isItem(link)}
91
115
  {@const item = link as NavigationMenuItemProps}
92
- <a href={item.href} class="block w-full rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-accent focus:bg-accent">
116
+ <a
117
+ href={item.href}
118
+ class="block w-full rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-accent focus:bg-accent"
119
+ >
93
120
  {item.label}
94
121
  </a>
95
122
  {/if}
package/dist/components/core/nav/ui/shared/MenuListItem.svelte CHANGED
@@ -1,5 +1,4 @@
1
1
  <script lang="ts">
2
- import * as NavigationMenu from "../../../../ui/navigation-menu/index.js";
3
2
  import { cn } from "../../../../../utils";
4
3
  import type { ListItemProps } from "../../data/types";
5
4
  let {
@@ -12,37 +11,29 @@
12
11
  }: ListItemProps = $props();
13
12
  </script>
14
13
 
15
- {#snippet header()}
16
- <div class="leading-none font-medium">{title}</div>
17
- {/snippet}
18
-
19
14
  <li>
20
- <NavigationMenu.Link>
21
- {#snippet child()}
22
- <a
23
- {href}
24
- class={cn(
25
- "block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
26
- className,
27
- )}
28
- {...restProps}
29
- >
30
- {#if icon}
31
- <div class="flex gap-1 items-center">
32
- <div>
33
- <i class={`${icon} size-8 md:size-10`}></i>
34
- </div>
35
- <div class="-mt-1">
36
- {@render header()}
37
- </div>
38
- </div>
39
- {:else}
40
- {@render header()}
41
- {/if}
42
- <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
43
- {content}
44
- </p>
45
- </a>
46
- {/snippet}
47
- </NavigationMenu.Link>
48
- </li>
15
+ <a
16
+ {href}
17
+ class={cn(
18
+ "block space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
19
+ className,
20
+ )}
21
+ {...restProps}
22
+ >
23
+ {#if icon}
24
+ <div class="flex gap-1 items-center">
25
+ <div>
26
+ <i class={`${icon} size-8 md:size-10`}></i>
27
+ </div>
28
+ <div class="-mt-1">
29
+ <div class="leading-none font-medium">{title}</div>
30
+ </div>
31
+ </div>
32
+ {:else}
33
+ <div class="leading-none font-medium">{title}</div>
34
+ {/if}
35
+ <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
36
+ {content}
37
+ </p>
38
+ </a>
39
+ </li>
package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItemGrid.svelte CHANGED
@@ -20,7 +20,7 @@
20
20
  {#if items}
21
21
  {@const gridCols = cols()}
22
22
  <DropdownMenu.SubContent>
23
- <ul class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 ${gridCols}`}>
23
+ <ul class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 ${gridCols}`}>
24
24
  {#each items as item, i (i)}
25
25
  <DropdownMenuListItem {...item} />
26
26
  {/each}
package/dist/components/core/nav/ui/shared/navigation/NavDropdown.svelte ADDED
@@ -0,0 +1,78 @@
1
+ <script lang="ts">
2
+ import { HugeiconsIcon } from "@hugeicons/svelte";
3
+ import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
4
+ import type { Snippet } from "svelte";
5
+
6
+ let {
7
+ label,
8
+ className = "",
9
+ children,
10
+ }: {
11
+ label: string;
12
+ className?: string;
13
+ children: Snippet;
14
+ } = $props();
15
+
16
+ let open = $state(false);
17
+ let closeTimer: ReturnType<typeof setTimeout> | undefined;
18
+ let itemRef = $state<HTMLLIElement | null>(null);
19
+
20
+ function openMenu() {
21
+ clearTimeout(closeTimer);
22
+ open = true;
23
+ }
24
+
25
+ function scheduleClose() {
26
+ clearTimeout(closeTimer);
27
+ closeTimer = setTimeout(() => {
28
+ open = false;
29
+ }, 150);
30
+ }
31
+
32
+ $effect(() => {
33
+ function handleDocumentClick(event: MouseEvent) {
34
+ if (open && itemRef && !itemRef.contains(event.target as Node)) {
35
+ open = false;
36
+ }
37
+ }
38
+ document.addEventListener("click", handleDocumentClick);
39
+ return () => document.removeEventListener("click", handleDocumentClick);
40
+ });
41
+ </script>
42
+
43
+ <li
44
+ bind:this={itemRef}
45
+ class="relative {className}"
46
+ onmouseenter={openMenu}
47
+ onmouseleave={scheduleClose}
48
+ >
49
+ <button
50
+ type="button"
51
+ aria-expanded={open}
52
+ onclick={() => {
53
+ clearTimeout(closeTimer);
54
+ open = !open;
55
+ }}
56
+ class="inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none select-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 {open
57
+ ? 'bg-muted'
58
+ : ''}"
59
+ >
60
+ {label}
61
+ <HugeiconsIcon
62
+ icon={ArrowDown01Icon}
63
+ strokeWidth={2}
64
+ class={`relative top-px ml-1 size-3 transition-transform duration-300 ${
65
+ open ? "rotate-180" : ""
66
+ }`}
67
+ aria-hidden="true"
68
+ />
69
+ </button>
70
+
71
+ {#if open}
72
+ <div
73
+ class="absolute left-0 top-full z-50 md:z-100 mt-1.5 w-max rounded-2xl bg-popover p-2.5 pr-3 overflow-hidden text-popover-foreground shadow-2xl ring-1 ring-foreground/5"
74
+ >
75
+ {@render children()}
76
+ </div>
77
+ {/if}
78
+ </li>
package/dist/components/core/nav/ui/shared/navigation/NavDropdown.svelte.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import type { Snippet } from "svelte";
2
+ type $$ComponentProps = {
3
+ label: string;
4
+ className?: string;
5
+ children: Snippet;
6
+ };
7
+ declare const NavDropdown: import("svelte").Component<$$ComponentProps, {}, "">;
8
+ type NavDropdown = ReturnType<typeof NavDropdown>;
9
+ export default NavDropdown;
package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItem.svelte CHANGED
@@ -1,15 +1,14 @@
1
1
  <script lang="ts">
2
- import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
3
2
  import type { NavigationMenuItemProps } from "../../../data/types";
4
- import { navigationMenuTriggerStyle } from "../../../../../ui/navigation-menu/navigation-menu-trigger.svelte";
5
3
 
6
4
  let { label, href }: NavigationMenuItemProps = $props();
7
5
  </script>
8
6
 
9
- <NavigationMenu.Item>
10
- <NavigationMenu.Link>
11
- {#snippet child()}
12
- <a {href} class={navigationMenuTriggerStyle()}>{label}</a>
13
- {/snippet}
14
- </NavigationMenu.Link>
15
- </NavigationMenu.Item>
7
+ <li>
8
+ <a
9
+ {href}
10
+ class="inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none select-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
11
+ >
12
+ {label}
13
+ </a>
14
+ </li>
package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemCard.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
- import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
3
2
  import type { NavigationMenuItemCardProps } from "../../../data/types";
4
3
  import MenuListItem from "../MenuListItem.svelte";
4
+ import NavDropdown from "./NavDropdown.svelte";
5
5
 
6
6
  let { label, header, cards: items }: NavigationMenuItemCardProps = $props();
7
7
  </script>
@@ -16,47 +16,33 @@
16
16
  </p>
17
17
  {/snippet}
18
18
 
19
- <NavigationMenu.Item>
20
- <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
21
- <NavigationMenu.Content>
22
- <ul class="grid gap-2 p-2 md:w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
23
- {#if header}
24
- <li
25
- class="row-span-3 relative"
26
- style={header.imgUrl
27
- ? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
28
- : ``}
19
+ <NavDropdown label={label ?? header?.label ?? ""}>
20
+ <ul
21
+ class="grid gap-2 p-2 w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]"
22
+ >
23
+ {#if header}
24
+ <li
25
+ class="row-span-3 relative"
26
+ style={header.imgUrl
27
+ ? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
28
+ : ``}
29
+ >
30
+ <a
31
+ href={header.href ?? "#"}
32
+ class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
33
+ header.imgUrl
34
+ ? `no-underline outline-hidden select-none`
35
+ : `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
36
+ }`}
29
37
  >
30
- <NavigationMenu.Link
31
- class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
32
- header.imgUrl
33
- ? `no-underline outline-hidden select-none`
34
- : `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
35
- }`}
36
- >
37
- {#snippet child({ props })}
38
- {#if header.imgUrl}
39
- <a
40
- {...props}
41
- href={header.href ?? "#"}
42
- class="bg-transparent absolute left-2 bottom-2"
43
- >
44
- {@render headerSnippet(header.label, header.description)}
45
- </a>
46
- {:else}
47
- <a {...props} href={header.href ?? "#"}>
48
- {@render headerSnippet(header.label, header.description)}
49
- </a>
50
- {/if}
51
- {/snippet}
52
- </NavigationMenu.Link>
53
- </li>
54
- {/if}
55
- {#if items && items.length > 0}
56
- {#each items as item, i (i)}
57
- <MenuListItem {...item} />
58
- {/each}
59
- {/if}
60
- </ul>
61
- </NavigationMenu.Content>
62
- </NavigationMenu.Item>
38
+ {@render headerSnippet(header.label, header.description)}
39
+ </a>
40
+ </li>
41
+ {/if}
42
+ {#if items && items.length > 0}
43
+ {#each items as item, i (i)}
44
+ <MenuListItem {...item} />
45
+ {/each}
46
+ {/if}
47
+ </ul>
48
+ </NavDropdown>
package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemGrid.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
- import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
3
2
  import type { NavigationMenuItemGridProps } from "../../../data/types";
4
3
  import MenuListItem from "../MenuListItem.svelte";
4
+ import NavDropdown from "./NavDropdown.svelte";
5
5
 
6
6
  let { label, grids: items }: NavigationMenuItemGridProps = $props();
7
7
 
@@ -13,20 +13,18 @@
13
13
  if (len % 2 == 0) return "md:grid-cols-2";
14
14
  return "grid-cols-1";
15
15
  };
16
+
17
+ const gridCols = $derived(cols());
16
18
  </script>
17
19
 
18
- <NavigationMenu.Item>
19
- <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
20
+ <NavDropdown {label}>
20
21
  {#if items}
21
- {@const gridCols = cols()}
22
- <NavigationMenu.Content>
23
- <ul
24
- class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 ${gridCols} lg:min-w-150`}
25
- >
26
- {#each items as item, i (i)}
27
- <MenuListItem {...item} />
28
- {/each}
29
- </ul>
30
- </NavigationMenu.Content>
22
+ <ul
23
+ class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 lg:min-w-150 max-h-75 overflow-y-auto ${gridCols}`}
24
+ >
25
+ {#each items as item, i (i)}
26
+ <MenuListItem {...item} />
27
+ {/each}
28
+ </ul>
31
29
  {/if}
32
- </NavigationMenu.Item>
30
+ </NavDropdown>
package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemList.svelte CHANGED
@@ -1,24 +1,21 @@
1
1
  <script lang="ts">
2
- import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
3
2
  import type { NavigationMenuItemListProps } from "../../../data/types";
3
+ import NavDropdown from "./NavDropdown.svelte";
4
4
 
5
5
  let { label, list }: NavigationMenuItemListProps = $props();
6
6
  </script>
7
7
 
8
- <NavigationMenu.Item class="hidden md:block relative">
9
- <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
10
- <NavigationMenu.Content>
11
- <ul class="grid w-75 gap-4 p-2">
12
- {#each list as item, i (i)}
13
- <li>
14
- <NavigationMenu.Link href={item.href}>
15
- <div class="font-medium">{item.title ?? ""}</div>
16
- <div class="text-muted-foreground">
17
- {item.content}
18
- </div>
19
- </NavigationMenu.Link>
20
- </li>
21
- {/each}
22
- </ul>
23
- </NavigationMenu.Content>
24
- </NavigationMenu.Item>
8
+ <NavDropdown {label} className="hidden md:block">
9
+ <ul class="grid w-75 gap-4 p-2">
10
+ {#each list as item, i (i)}
11
+ <li>
12
+ <a href={item.href} class="block rounded-xl p-2 no-underline hover:bg-muted">
13
+ <div class="font-medium">{item.title ?? ""}</div>
14
+ <div class="text-muted-foreground">
15
+ {item.content}
16
+ </div>
17
+ </a>
18
+ </li>
19
+ {/each}
20
+ </ul>
21
+ </NavDropdown>
package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItems.svelte CHANGED
@@ -1,21 +1,21 @@
1
1
  <script lang="ts">
2
- import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
3
2
  import type { NavigationMenuItemsProps } from "../../../data/types";
3
+ import NavDropdown from "./NavDropdown.svelte";
4
4
 
5
5
  let { label, items }: NavigationMenuItemsProps = $props();
6
6
  </script>
7
7
 
8
- <NavigationMenu.Item class="hidden md:block relative">
9
- <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
10
- <NavigationMenu.Content>
11
- <ul class="grid min-w-50 gap-4 p-1 md:p-2">
12
- {#each items as item, i (i)}
13
- <li>
14
- <NavigationMenu.Link href={item.href} class="py-1">
15
- {item.title}
16
- </NavigationMenu.Link>
17
- </li>
18
- {/each}
19
- </ul>
20
- </NavigationMenu.Content>
21
- </NavigationMenu.Item>
8
+ <NavDropdown {label} className="hidden md:block">
9
+ <ul class="grid min-w-50 gap-4 p-1 md:p-2">
10
+ {#each items as item, i (i)}
11
+ <li>
12
+ <a
13
+ href={item.href}
14
+ class="block rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-muted focus:bg-muted"
15
+ >
16
+ {item.title}
17
+ </a>
18
+ </li>
19
+ {/each}
20
+ </ul>
21
+ </NavDropdown>
package/dist/globals.css CHANGED
@@ -876,12 +876,18 @@
876
876
  .h-svh {
877
877
  height: 100svh;
878
878
  }
879
+ .max-h-37\.5 {
880
+ max-height: calc(var(--spacing) * 37.5);
881
+ }
879
882
  .max-h-50 {
880
883
  max-height: calc(var(--spacing) * 50);
881
884
  }
882
885
  .max-h-72 {
883
886
  max-height: calc(var(--spacing) * 72);
884
887
  }
888
+ .max-h-75 {
889
+ max-height: calc(var(--spacing) * 75);
890
+ }
885
891
  .max-h-237\.5 {
886
892
  max-height: calc(var(--spacing) * 237.5);
887
893
  }
@@ -1222,6 +1228,9 @@
1222
1228
  .rotate-90 {
1223
1229
  rotate: 90deg;
1224
1230
  }
1231
+ .rotate-180 {
1232
+ rotate: 180deg;
1233
+ }
1225
1234
  .transform {
1226
1235
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1227
1236
  }
@@ -4271,6 +4280,9 @@
4271
4280
  .md\:left-6 {
4272
4281
  left: calc(var(--spacing) * 6);
4273
4282
  }
4283
+ .md\:z-100 {
4284
+ z-index: 100;
4285
+ }
4274
4286
  .md\:col-span-2 {
4275
4287
  grid-column: span 2 / span 2;
4276
4288
  }
@@ -4378,9 +4390,6 @@
4378
4390
  .md\:w-52 {
4379
4391
  width: calc(var(--spacing) * 52);
4380
4392
  }
4381
- .md\:w-100 {
4382
- width: calc(var(--spacing) * 100);
4383
- }
4384
4393
  .md\:w-125 {
4385
4394
  width: calc(var(--spacing) * 125);
4386
4395
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "negodesign",
3
- "version": "0.0.66",
3
+ "version": "0.0.68",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "sideEffects": [