negodesign 0.0.53 → 0.0.55
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.
- package/dist/components/core/card/media/01/CardMedia01.svelte +2 -2
- package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte +54 -29
- package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte +3 -3
- package/dist/components/core/carousel/hero/CarouselHero.svelte +1 -1
- package/dist/components/core/carousel/types.d.ts +4 -0
- package/dist/components/core/nav/ui/Menu.svelte +66 -0
- package/dist/components/core/nav/ui/Menu.svelte.d.ts +4 -0
- package/dist/components/core/nav/ui/{nav-menu.svelte → NavMenu.svelte} +1 -1
- package/dist/components/core/nav/ui/mobile/nav-menu-drawer.svelte +1 -1
- package/dist/components/core/nav/ui/{menu-links.svelte → shared/MenuLinks.svelte} +2 -2
- package/dist/components/core/nav/ui/{menu-links.svelte.d.ts → shared/MenuLinks.svelte.d.ts} +1 -1
- package/dist/components/core/nav/ui/shared/MenuListItem.svelte +48 -0
- package/dist/components/core/nav/ui/shared/MenuListItem.svelte.d.ts +4 -0
- package/dist/components/core/nav/ui/shared/NavigationMenuItem.svelte +15 -0
- package/dist/components/core/nav/ui/shared/NavigationMenuItem.svelte.d.ts +4 -0
- package/dist/components/core/nav/ui/shared/NavigationMenuItemCard.svelte +62 -0
- package/dist/components/core/nav/ui/shared/NavigationMenuItemCard.svelte.d.ts +4 -0
- package/dist/components/core/nav/ui/shared/NavigationMenuItemGrid.svelte +32 -0
- package/dist/components/core/nav/ui/shared/NavigationMenuItemGrid.svelte.d.ts +4 -0
- package/dist/components/core/nav/ui/shared/NavigationMenuItemList.svelte +24 -0
- package/dist/components/core/nav/ui/shared/NavigationMenuItemList.svelte.d.ts +4 -0
- package/dist/components/core/nav/ui/shared/NavigationMenuItems.svelte +21 -0
- package/dist/components/core/nav/ui/shared/NavigationMenuItems.svelte.d.ts +4 -0
- package/dist/components/core/nav/ui/shared/types.d.ts +41 -0
- package/dist/components/core/nav/ui/shared/types.js +1 -0
- package/dist/components/core/sidebar/MenuBarSidebar.svelte +4 -4
- package/dist/components/core/{nav/ui/nav-menu-sidebar.svelte → sidebar/ui/navbar/NavMenuBarSidebar.svelte} +3 -3
- package/dist/components/core/sidebar/ui/navbar/NavMenuBarSidebar.svelte.d.ts +7 -0
- package/dist/components/core/{nav/ui/nav-menu-bottom-sidebar.svelte → sidebar/ui/navbar/NavMenuBottomSidebar.svelte} +2 -2
- package/dist/components/core/{nav/ui/nav-menu-bottom-sidebar.svelte.d.ts → sidebar/ui/navbar/NavMenuBottomSidebar.svelte.d.ts} +2 -2
- package/dist/components/core/{nav/ui/nav-menu-top-bar-sidebar.svelte → sidebar/ui/navbar/NavMenuTopBarSidebar.svelte} +4 -4
- package/dist/components/core/{nav/ui/nav-menu-top-bar-sidebar.svelte.d.ts → sidebar/ui/navbar/NavMenuTopBarSidebar.svelte.d.ts} +1 -1
- package/dist/components/core/{nav/ui/nav-user-sidebar.svelte → sidebar/ui/navbar/NavUserSidebar.svelte} +6 -6
- package/dist/components/core/{nav/ui/nav-user-sidebar.svelte.d.ts → sidebar/ui/navbar/NavUserSidebar.svelte.d.ts} +1 -1
- package/dist/components/core/{nav/ui → sidebar/ui/navbar}/nav-menu-header-sidebar.svelte +3 -3
- package/dist/components/ui/navigation-menu/index.d.ts +9 -0
- package/dist/components/ui/navigation-menu/index.js +11 -0
- package/dist/components/ui/navigation-menu/navigation-menu-content.svelte +20 -0
- package/dist/components/ui/navigation-menu/navigation-menu-content.svelte.d.ts +4 -0
- package/dist/components/ui/navigation-menu/navigation-menu-indicator.svelte +22 -0
- package/dist/components/ui/navigation-menu/navigation-menu-indicator.svelte.d.ts +4 -0
- package/dist/components/ui/navigation-menu/navigation-menu-item.svelte +17 -0
- package/dist/components/ui/navigation-menu/navigation-menu-item.svelte.d.ts +4 -0
- package/dist/components/ui/navigation-menu/navigation-menu-link.svelte +17 -0
- package/dist/components/ui/navigation-menu/navigation-menu-link.svelte.d.ts +4 -0
- package/dist/components/ui/navigation-menu/navigation-menu-list.svelte +20 -0
- package/dist/components/ui/navigation-menu/navigation-menu-list.svelte.d.ts +4 -0
- package/dist/components/ui/navigation-menu/navigation-menu-trigger.svelte +30 -0
- package/dist/components/ui/navigation-menu/navigation-menu-trigger.svelte.d.ts +5 -0
- package/dist/components/ui/navigation-menu/navigation-menu-viewport.svelte +22 -0
- package/dist/components/ui/navigation-menu/navigation-menu-viewport.svelte.d.ts +4 -0
- package/dist/components/ui/navigation-menu/navigation-menu.svelte +31 -0
- package/dist/components/ui/navigation-menu/navigation-menu.svelte.d.ts +7 -0
- package/dist/globals.css +324 -12
- package/dist/index.d.ts +4 -3
- package/dist/index.js +4 -3
- package/dist/types/index.d.ts +2 -1
- package/package.json +1 -1
- package/dist/components/core/nav/ui/nav-menu-sidebar.svelte.d.ts +0 -7
- /package/dist/components/core/nav/ui/{nav-menu.svelte.d.ts → NavMenu.svelte.d.ts} +0 -0
- /package/dist/components/core/{nav/ui → sidebar/ui/navbar}/nav-menu-header-sidebar.svelte.d.ts +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { NavTopBarSidebarItem } from "
|
|
1
|
+
import type { NavTopBarSidebarItem } from "../../../nav/data/nav-top-bar-sidebar";
|
|
2
2
|
declare const NavMenuTopBarSidebar: import("svelte").Component<NavTopBarSidebarItem, {}, "">;
|
|
3
3
|
type NavMenuTopBarSidebar = ReturnType<typeof NavMenuTopBarSidebar>;
|
|
4
4
|
export default NavMenuTopBarSidebar;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import * as Avatar from "
|
|
3
|
-
import * as DropdownMenu from "
|
|
4
|
-
import * as Sidebar from "
|
|
5
|
-
import
|
|
6
|
-
import { useSidebar } from "../../../ui/sidebar/index.js";
|
|
2
|
+
import * as Avatar from "../../../../ui/avatar/index.js";
|
|
3
|
+
import * as DropdownMenu from "../../../../ui/dropdown-menu/index.js";
|
|
4
|
+
import * as Sidebar from "../../../../ui/sidebar/index.js";
|
|
5
|
+
import { useSidebar } from "../../../../ui/sidebar/index.js";
|
|
7
6
|
import { HugeiconsIcon } from "@hugeicons/svelte";
|
|
8
7
|
import {
|
|
9
8
|
UnfoldMoreIcon,
|
|
10
9
|
Logout01Icon,
|
|
11
10
|
SparklesIcon,
|
|
12
11
|
} from "@hugeicons/core-free-icons";
|
|
13
|
-
import { t } from "
|
|
12
|
+
import { t } from "../../../../../i18n";
|
|
13
|
+
import type { NavUserSidebarProps } from "../../../../../types";
|
|
14
14
|
|
|
15
15
|
let { user: userLogged }: { user: NavUserSidebarProps } = $props();
|
|
16
16
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import * as DropdownMenu from "
|
|
3
|
-
import * as Sidebar from "
|
|
4
|
-
import { useSidebar } from "
|
|
2
|
+
import * as DropdownMenu from "../../../../ui/dropdown-menu/index.js";
|
|
3
|
+
import * as Sidebar from "../../../../ui/sidebar/index.js";
|
|
4
|
+
import { useSidebar } from "../../../../ui/sidebar/index.js";
|
|
5
5
|
import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
|
|
6
6
|
import PlusIcon from "@lucide/svelte/icons/plus";
|
|
7
7
|
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import Content from "./navigation-menu-content.svelte";
|
|
2
|
+
import Indicator from "./navigation-menu-indicator.svelte";
|
|
3
|
+
import Item from "./navigation-menu-item.svelte";
|
|
4
|
+
import Link from "./navigation-menu-link.svelte";
|
|
5
|
+
import List from "./navigation-menu-list.svelte";
|
|
6
|
+
import Trigger from "./navigation-menu-trigger.svelte";
|
|
7
|
+
import Viewport from "./navigation-menu-viewport.svelte";
|
|
8
|
+
import Root from "./navigation-menu.svelte";
|
|
9
|
+
export { Root, Content, Indicator, Item, Link, List, Trigger, Viewport, Root as NavigationMenuRoot, Content as NavigationMenuContent, Indicator as NavigationMenuIndicator, Item as NavigationMenuItem, Link as NavigationMenuLink, List as NavigationMenuList, Trigger as NavigationMenuTrigger, Viewport as NavigationMenuViewport, };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import Content from "./navigation-menu-content.svelte";
|
|
2
|
+
import Indicator from "./navigation-menu-indicator.svelte";
|
|
3
|
+
import Item from "./navigation-menu-item.svelte";
|
|
4
|
+
import Link from "./navigation-menu-link.svelte";
|
|
5
|
+
import List from "./navigation-menu-list.svelte";
|
|
6
|
+
import Trigger from "./navigation-menu-trigger.svelte";
|
|
7
|
+
import Viewport from "./navigation-menu-viewport.svelte";
|
|
8
|
+
import Root from "./navigation-menu.svelte";
|
|
9
|
+
export { Root, Content, Indicator, Item, Link, List, Trigger, Viewport,
|
|
10
|
+
//
|
|
11
|
+
Root as NavigationMenuRoot, Content as NavigationMenuContent, Indicator as NavigationMenuIndicator, Item as NavigationMenuItem, Link as NavigationMenuLink, List as NavigationMenuList, Trigger as NavigationMenuTrigger, Viewport as NavigationMenuViewport, };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: NavigationMenuPrimitive.ContentProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<NavigationMenuPrimitive.Content
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="navigation-menu-content"
|
|
15
|
+
class={cn(
|
|
16
|
+
"isolate z-50 p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/5 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
|
|
17
|
+
className
|
|
18
|
+
)}
|
|
19
|
+
{...restProps}
|
|
20
|
+
/>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
2
|
+
declare const NavigationMenuContent: import("svelte").Component<NavigationMenuPrimitive.ContentProps, {}, "ref">;
|
|
3
|
+
type NavigationMenuContent = ReturnType<typeof NavigationMenuContent>;
|
|
4
|
+
export default NavigationMenuContent;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: NavigationMenuPrimitive.IndicatorProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<NavigationMenuPrimitive.Indicator
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="navigation-menu-indicator"
|
|
15
|
+
class={cn(
|
|
16
|
+
"data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
|
17
|
+
className
|
|
18
|
+
)}
|
|
19
|
+
{...restProps}
|
|
20
|
+
>
|
|
21
|
+
<div class="rounded-tl-sm bg-border shadow-md relative top-[60%] h-2 w-2 rotate-45"></div>
|
|
22
|
+
</NavigationMenuPrimitive.Indicator>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
2
|
+
declare const NavigationMenuIndicator: import("svelte").Component<NavigationMenuPrimitive.IndicatorProps, {}, "ref">;
|
|
3
|
+
type NavigationMenuIndicator = ReturnType<typeof NavigationMenuIndicator>;
|
|
4
|
+
export default NavigationMenuIndicator;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: NavigationMenuPrimitive.ItemProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<NavigationMenuPrimitive.Item
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="navigation-menu-item"
|
|
15
|
+
class={cn("cn-navigation-menu-item relative", className)}
|
|
16
|
+
{...restProps}
|
|
17
|
+
/>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
2
|
+
declare const NavigationMenuItem: import("svelte").Component<NavigationMenuPrimitive.ItemProps, {}, "ref">;
|
|
3
|
+
type NavigationMenuItem = ReturnType<typeof NavigationMenuItem>;
|
|
4
|
+
export default NavigationMenuItem;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: NavigationMenuPrimitive.LinkProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<NavigationMenuPrimitive.Link
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="navigation-menu-link"
|
|
15
|
+
class={cn("flex items-center gap-1.5 rounded-2xl p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-xl data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className)}
|
|
16
|
+
{...restProps}
|
|
17
|
+
/>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
2
|
+
declare const NavigationMenuLink: import("svelte").Component<NavigationMenuPrimitive.LinkProps, {}, "ref">;
|
|
3
|
+
type NavigationMenuLink = ReturnType<typeof NavigationMenuLink>;
|
|
4
|
+
export default NavigationMenuLink;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: NavigationMenuPrimitive.ListProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<NavigationMenuPrimitive.List
|
|
13
|
+
bind:ref
|
|
14
|
+
data-slot="navigation-menu-list"
|
|
15
|
+
class={cn(
|
|
16
|
+
"gap-0 group flex flex-1 list-none items-center justify-center",
|
|
17
|
+
className
|
|
18
|
+
)}
|
|
19
|
+
{...restProps}
|
|
20
|
+
/>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
2
|
+
declare const NavigationMenuList: import("svelte").Component<NavigationMenuPrimitive.ListProps, {}, "ref">;
|
|
3
|
+
type NavigationMenuList = ReturnType<typeof NavigationMenuList>;
|
|
4
|
+
export default NavigationMenuList;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import { tv } from "tailwind-variants";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
export const navigationMenuTriggerStyle = tv({
|
|
6
|
+
base: "rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none",
|
|
7
|
+
});
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
12
|
+
import { HugeiconsIcon } from "@hugeicons/svelte"
|
|
13
|
+
import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
|
|
14
|
+
let {
|
|
15
|
+
ref = $bindable(null),
|
|
16
|
+
class: className,
|
|
17
|
+
children,
|
|
18
|
+
...restProps
|
|
19
|
+
}: NavigationMenuPrimitive.TriggerProps = $props();
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<NavigationMenuPrimitive.Trigger
|
|
23
|
+
bind:ref
|
|
24
|
+
data-slot="navigation-menu-trigger"
|
|
25
|
+
class={cn(navigationMenuTriggerStyle(), "group", className)}
|
|
26
|
+
{...restProps}
|
|
27
|
+
>
|
|
28
|
+
{@render children?.()}
|
|
29
|
+
<HugeiconsIcon icon={ArrowDown01Icon} strokeWidth={2} class="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
|
|
30
|
+
</NavigationMenuPrimitive.Trigger>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const navigationMenuTriggerStyle: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
|
|
2
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
3
|
+
declare const NavigationMenuTrigger: import("svelte").Component<NavigationMenuPrimitive.TriggerProps, {}, "ref">;
|
|
4
|
+
type NavigationMenuTrigger = ReturnType<typeof NavigationMenuTrigger>;
|
|
5
|
+
export default NavigationMenuTrigger;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: NavigationMenuPrimitive.ViewportProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<div class={cn("absolute start-0 top-full isolate z-50 flex justify-center")}>
|
|
13
|
+
<NavigationMenuPrimitive.Viewport
|
|
14
|
+
bind:ref
|
|
15
|
+
data-slot="navigation-menu-viewport"
|
|
16
|
+
class={cn(
|
|
17
|
+
"rounded-2xl bg-popover text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90 origin-top-center relative mt-1.5 h-[calc(var(--bits-navigation-menu-viewport-height)+1rem)] w-full overflow-hidden md:w-[calc(var(--bits-navigation-menu-viewport-width)+1rem)]",
|
|
18
|
+
className
|
|
19
|
+
)}
|
|
20
|
+
{...restProps}
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
2
|
+
declare const NavigationMenuViewport: import("svelte").Component<NavigationMenuPrimitive.ViewportProps, {}, "ref">;
|
|
3
|
+
type NavigationMenuViewport = ReturnType<typeof NavigationMenuViewport>;
|
|
4
|
+
export default NavigationMenuViewport;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils.js";
|
|
4
|
+
import NavigationMenuViewport from "./navigation-menu-viewport.svelte";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
viewport = true,
|
|
10
|
+
children,
|
|
11
|
+
...restProps
|
|
12
|
+
}: NavigationMenuPrimitive.RootProps & {
|
|
13
|
+
viewport?: boolean;
|
|
14
|
+
} = $props();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<NavigationMenuPrimitive.Root
|
|
18
|
+
bind:ref
|
|
19
|
+
data-slot="navigation-menu"
|
|
20
|
+
data-viewport={viewport}
|
|
21
|
+
class={cn(
|
|
22
|
+
"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
|
23
|
+
className
|
|
24
|
+
)}
|
|
25
|
+
{...restProps}
|
|
26
|
+
>
|
|
27
|
+
{@render children?.()}
|
|
28
|
+
{#if viewport}
|
|
29
|
+
<NavigationMenuViewport />
|
|
30
|
+
{/if}
|
|
31
|
+
</NavigationMenuPrimitive.Root>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
|
|
2
|
+
type $$ComponentProps = NavigationMenuPrimitive.RootProps & {
|
|
3
|
+
viewport?: boolean;
|
|
4
|
+
};
|
|
5
|
+
declare const NavigationMenu: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
6
|
+
type NavigationMenu = ReturnType<typeof NavigationMenu>;
|
|
7
|
+
export default NavigationMenu;
|