wicn-svelte 0.9.0 → 0.10.0

package/dist/index.d.ts

@@ -17,3 +17,7 @@ export { default as SplitterPanel } from './SplitterPanel.svelte';
 export { default as SplitterResizeTrigger } from './SplitterResizeTrigger.svelte';
 export { default as SplitterResizeTriggerIndicator } from './SplitterResizeTriggerIndicator.svelte';
 export * from './sidebar';
+export * from './nav-menu';
+export * from './tabs';
+export * from './pagination';
+export * from './navbar';

package/dist/index.js

@@ -18,3 +18,7 @@ export { default as SplitterPanel } from './SplitterPanel.svelte';
 export { default as SplitterResizeTrigger } from './SplitterResizeTrigger.svelte';
 export { default as SplitterResizeTriggerIndicator } from './SplitterResizeTriggerIndicator.svelte';
 export * from './sidebar';
+export * from './nav-menu';
+export * from './tabs';
+export * from './pagination';
+export * from './navbar';

package/dist/nav-menu/NavMenu.svelte

@@ -0,0 +1,60 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavMenu.svelte -->
+<!-- Closely based on: @ark-ui/svelte/navigation-menu (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import {
+    NavigationMenuRoot,
+    NavigationMenuViewport,
+    NavigationMenuViewportPositioner,
+    type NavigationMenuRootProps,
+  } from '@ark-ui/svelte/navigation-menu';
+  import {
+    navMenuRootBase,
+    navMenuViewportPositionerBase,
+    navMenuViewportBase,
+    cn,
+    type NavMenuDensity,
+    type NavMenuVariant,
+  } from 'wicn-core';
+  import { setNavMenuStyle } from './context.svelte';
+
+  let {
+    value,
+    defaultValue,
+    onValueChange,
+    openDelay,
+    closeDelay,
+    density = 'relaxed',
+    class: className = '',
+    children,
+    ...rest
+  }: NavigationMenuRootProps & { density?: NavMenuDensity } = $props();
+
+  const classes = $derived(cn(navMenuRootBase, className));
+  setNavMenuStyle({
+    get density() {
+      return density;
+    },
+    get variant() {
+      return 'default' as NavMenuVariant;
+    },
+    get inContent() {
+      return false;
+    },
+  });
+</script>
+
+<NavigationMenuRoot
+  {value}
+  {defaultValue}
+  {onValueChange}
+  {openDelay}
+  {closeDelay}
+  data-density={density}
+  class={classes}
+  {...rest}
+>
+  {@render children?.()}
+  <NavigationMenuViewportPositioner class={cn(navMenuViewportPositionerBase)}>
+    <NavigationMenuViewport class={cn(navMenuViewportBase)} />
+  </NavigationMenuViewportPositioner>
+</NavigationMenuRoot>

package/dist/nav-menu/NavMenu.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type NavigationMenuRootProps } from '@ark-ui/svelte/navigation-menu';
+import { type NavMenuDensity } from 'wicn-core';
+type $$ComponentProps = NavigationMenuRootProps & {
+    density?: NavMenuDensity;
+};
+declare const NavMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavMenu = ReturnType<typeof NavMenu>;
+export default NavMenu;

package/dist/nav-menu/NavMenuContent.svelte

@@ -0,0 +1,16 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavMenuContent.svelte -->
+<!-- Closely based on: @ark-ui/svelte/navigation-menu (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import { NavigationMenuContent, type NavigationMenuContentProps } from '@ark-ui/svelte/navigation-menu';
+  import { navMenuContentBase, cn } from 'wicn-core';
+  import { setNavMenuStyle } from './context.svelte';
+
+  let { value, class: className = '', children, ...rest }: NavigationMenuContentProps = $props();
+
+  const classes = $derived(cn(navMenuContentBase, className));
+  setNavMenuStyle({ density: 'relaxed', variant: 'default', inContent: true });
+</script>
+
+<NavigationMenuContent {value} class={classes} {...rest}>
+  {@render children?.()}
+</NavigationMenuContent>

package/dist/nav-menu/NavMenuContent.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type NavigationMenuContentProps } from '@ark-ui/svelte/navigation-menu';
+declare const NavMenuContent: import("svelte").Component<NavigationMenuContentProps, {}, "">;
+type NavMenuContent = ReturnType<typeof NavMenuContent>;
+export default NavMenuContent;

package/dist/nav-menu/NavMenuIndicator.svelte

@@ -0,0 +1,12 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavMenuIndicator.svelte -->
+<!-- Closely based on: @ark-ui/svelte/navigation-menu (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from '@ark-ui/svelte/navigation-menu';
+  import { navMenuIndicatorBase, cn } from 'wicn-core';
+
+  let { class: className = '', ...rest }: NavigationMenuIndicatorProps = $props();
+
+  const classes = $derived(cn(navMenuIndicatorBase, className));
+</script>
+
+<NavigationMenuIndicator class={classes} {...rest} />

package/dist/nav-menu/NavMenuIndicator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type NavigationMenuIndicatorProps } from '@ark-ui/svelte/navigation-menu';
+declare const NavMenuIndicator: import("svelte").Component<NavigationMenuIndicatorProps, {}, "">;
+type NavMenuIndicator = ReturnType<typeof NavMenuIndicator>;
+export default NavMenuIndicator;

package/dist/nav-menu/NavMenuItem.svelte

@@ -0,0 +1,34 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavMenuItem.svelte -->
+<!-- Closely based on: @ark-ui/svelte/navigation-menu (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import { NavigationMenuItem, type NavigationMenuItemProps } from '@ark-ui/svelte/navigation-menu';
+  import { navMenuItemBase, cn, type NavMenuVariant } from 'wicn-core';
+  import { getNavMenuStyle, setNavMenuStyle } from './context.svelte';
+
+  let {
+    value,
+    disabled = false,
+    variant = 'default',
+    class: className = '',
+    children,
+    ...rest
+  }: NavigationMenuItemProps & { variant?: NavMenuVariant } = $props();
+
+  const parentStyle = getNavMenuStyle();
+  setNavMenuStyle({
+    get density() {
+      return parentStyle.density;
+    },
+    get variant() {
+      return variant;
+    },
+    get inContent() {
+      return false;
+    },
+  });
+  const classes = $derived(cn(navMenuItemBase, className));
+</script>
+
+<NavigationMenuItem {value} {disabled} data-variant={variant} class={classes} {...rest}>
+  {@render children?.()}
+</NavigationMenuItem>

package/dist/nav-menu/NavMenuItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type NavigationMenuItemProps } from '@ark-ui/svelte/navigation-menu';
+import { type NavMenuVariant } from 'wicn-core';
+type $$ComponentProps = NavigationMenuItemProps & {
+    variant?: NavMenuVariant;
+};
+declare const NavMenuItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavMenuItem = ReturnType<typeof NavMenuItem>;
+export default NavMenuItem;

package/dist/nav-menu/NavMenuLink.svelte

@@ -0,0 +1,18 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavMenuLink.svelte -->
+<!-- Closely based on: @ark-ui/svelte/navigation-menu (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import { NavigationMenuLink, type NavigationMenuLinkProps } from '@ark-ui/svelte/navigation-menu';
+  import { navMenuLinkBase, navMenuTriggerStyle, cn } from 'wicn-core';
+  import { getNavMenuStyle } from './context.svelte';
+
+  let { class: className = '', children, ...rest }: NavigationMenuLinkProps = $props();
+
+  const style = getNavMenuStyle();
+  const classes = $derived(
+    style.inContent ? cn(navMenuLinkBase, className) : cn(navMenuTriggerStyle(style), className),
+  );
+</script>
+
+<NavigationMenuLink class={classes} {...rest}>
+  {@render children?.()}
+</NavigationMenuLink>

package/dist/nav-menu/NavMenuLink.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type NavigationMenuLinkProps } from '@ark-ui/svelte/navigation-menu';
+declare const NavMenuLink: import("svelte").Component<NavigationMenuLinkProps, {}, "">;
+type NavMenuLink = ReturnType<typeof NavMenuLink>;
+export default NavMenuLink;

package/dist/nav-menu/NavMenuList.svelte

@@ -0,0 +1,14 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavMenuList.svelte -->
+<!-- Closely based on: @ark-ui/svelte/navigation-menu (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import { NavigationMenuList, type NavigationMenuListProps } from '@ark-ui/svelte/navigation-menu';
+  import { navMenuListBase, cn } from 'wicn-core';
+
+  let { class: className = '', children, ...rest }: NavigationMenuListProps = $props();
+
+  const classes = $derived(cn(navMenuListBase, className));
+</script>
+
+<NavigationMenuList class={classes} {...rest}>
+  {@render children?.()}
+</NavigationMenuList>

package/dist/nav-menu/NavMenuList.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type NavigationMenuListProps } from '@ark-ui/svelte/navigation-menu';
+declare const NavMenuList: import("svelte").Component<NavigationMenuListProps, {}, "">;
+type NavMenuList = ReturnType<typeof NavMenuList>;
+export default NavMenuList;

package/dist/nav-menu/NavMenuTrigger.svelte

@@ -0,0 +1,30 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavMenuTrigger.svelte -->
+<!-- Closely based on: @ark-ui/svelte/navigation-menu (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import { NavigationMenuTrigger, type NavigationMenuTriggerProps } from '@ark-ui/svelte/navigation-menu';
+  import { navMenuTriggerStyle, cn } from 'wicn-core';
+  import { getNavMenuStyle } from './context.svelte';
+
+  let { disabled = false, asChild, class: className = '', children, ...rest }: NavigationMenuTriggerProps = $props();
+
+  const style = getNavMenuStyle();
+  const classes = $derived(cn(navMenuTriggerStyle(style), className));
+</script>
+
+<NavigationMenuTrigger {disabled} {asChild} class={classes} {...rest}>
+  {@render children?.()}
+  {#if !asChild}
+    <svg
+      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="m6 9 6 6 6-6"></path>
+    </svg>
+  {/if}
+</NavigationMenuTrigger>

package/dist/nav-menu/NavMenuTrigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type NavigationMenuTriggerProps } from '@ark-ui/svelte/navigation-menu';
+declare const NavMenuTrigger: import("svelte").Component<NavigationMenuTriggerProps, {}, "">;
+type NavMenuTrigger = ReturnType<typeof NavMenuTrigger>;
+export default NavMenuTrigger;

package/dist/nav-menu/NavMenuViewport.svelte

@@ -0,0 +1,12 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavMenuViewport.svelte -->
+<!-- Closely based on: @ark-ui/svelte/navigation-menu (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import { NavigationMenuViewport, type NavigationMenuViewportProps } from '@ark-ui/svelte/navigation-menu';
+  import { navMenuViewportBase, cn } from 'wicn-core';
+
+  let { class: className = '', ...rest }: NavigationMenuViewportProps = $props();
+
+  const classes = $derived(cn(navMenuViewportBase, className));
+</script>
+
+<NavigationMenuViewport class={classes} {...rest} />

package/dist/nav-menu/NavMenuViewport.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type NavigationMenuViewportProps } from '@ark-ui/svelte/navigation-menu';
+declare const NavMenuViewport: import("svelte").Component<NavigationMenuViewportProps, {}, "">;
+type NavMenuViewport = ReturnType<typeof NavMenuViewport>;
+export default NavMenuViewport;

package/dist/nav-menu/NavMenuViewportPositioner.svelte

@@ -0,0 +1,17 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavMenuViewportPositioner.svelte -->
+<!-- Closely based on: @ark-ui/svelte/navigation-menu (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import {
+    NavigationMenuViewportPositioner,
+    type NavigationMenuViewportPositionerProps,
+  } from '@ark-ui/svelte/navigation-menu';
+  import { navMenuViewportPositionerBase, cn } from 'wicn-core';
+
+  let { class: className = '', children, ...rest }: NavigationMenuViewportPositionerProps = $props();
+
+  const classes = $derived(cn(navMenuViewportPositionerBase, className));
+</script>
+
+<NavigationMenuViewportPositioner class={classes} {...rest}>
+  {@render children?.()}
+</NavigationMenuViewportPositioner>

package/dist/nav-menu/NavMenuViewportPositioner.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type NavigationMenuViewportPositionerProps } from '@ark-ui/svelte/navigation-menu';
+declare const NavMenuViewportPositioner: import("svelte").Component<NavigationMenuViewportPositionerProps, {}, "">;
+type NavMenuViewportPositioner = ReturnType<typeof NavMenuViewportPositioner>;
+export default NavMenuViewportPositioner;

package/dist/nav-menu/NavSubMenu.svelte

@@ -0,0 +1,14 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavSubMenu.svelte -->
+<!-- Closely based on: @ark-ui/svelte/collapsible (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import { CollapsibleRoot, type CollapsibleRootProps } from '@ark-ui/svelte/collapsible';
+  import { cn } from 'wicn-core';
+
+  let { class: className = '', children, ...rest }: CollapsibleRootProps = $props();
+
+  const classes = $derived(cn('group', className));
+</script>
+
+<CollapsibleRoot data-slot="nav-sub-menu" class={classes} {...rest}>
+  {@render children?.()}
+</CollapsibleRoot>

package/dist/nav-menu/NavSubMenu.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type CollapsibleRootProps } from '@ark-ui/svelte/collapsible';
+declare const NavSubMenu: import("svelte").Component<CollapsibleRootProps, {}, "">;
+type NavSubMenu = ReturnType<typeof NavSubMenu>;
+export default NavSubMenu;

package/dist/nav-menu/NavSubMenuContent.svelte

@@ -0,0 +1,23 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavSubMenuContent.svelte -->
+<!-- Closely based on: @ark-ui/svelte/collapsible (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import { CollapsibleContent } from '@ark-ui/svelte/collapsible';
+  import { navSubMenuContentBase, cn } from 'wicn-core';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(navSubMenuContentBase, className));
+</script>
+
+<CollapsibleContent>
+  <div data-slot="nav-sub-menu-content" class={classes} {...rest}>
+    {@render children?.()}
+  </div>
+</CollapsibleContent>

package/dist/nav-menu/NavSubMenuContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const NavSubMenuContent: import("svelte").Component<Props, {}, "">;
+type NavSubMenuContent = ReturnType<typeof NavSubMenuContent>;
+export default NavSubMenuContent;

package/dist/nav-menu/NavSubMenuTrigger.svelte

@@ -0,0 +1,26 @@
+<!-- libs/wicn-svelte/src/nav-menu/NavSubMenuTrigger.svelte -->
+<!-- Closely based on: @ark-ui/svelte/collapsible (Ark UI), mirrored from wicn-react -->
+<script lang="ts">
+  import { CollapsibleTrigger, type CollapsibleTriggerProps } from '@ark-ui/svelte/collapsible';
+  import { navMenuTriggerStyle, cn } from 'wicn-core';
+
+  let { class: className = '', children, ...rest }: CollapsibleTriggerProps = $props();
+
+  const classes = $derived(cn(navMenuTriggerStyle(), 'w-full justify-between', className));
+</script>
+
+<CollapsibleTrigger data-slot="nav-sub-menu-trigger" class={classes} {...rest}>
+  {@render children?.()}
+  <svg
+    class="size-4 transition-transform duration-200 group-data-[state=open]:rotate-180"
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="m6 9 6 6 6-6"></path>
+  </svg>
+</CollapsibleTrigger>

package/dist/nav-menu/NavSubMenuTrigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type CollapsibleTriggerProps } from '@ark-ui/svelte/collapsible';
+declare const NavSubMenuTrigger: import("svelte").Component<CollapsibleTriggerProps, {}, "">;
+type NavSubMenuTrigger = ReturnType<typeof NavSubMenuTrigger>;
+export default NavSubMenuTrigger;

package/dist/nav-menu/context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { NavMenuDensity, NavMenuVariant } from 'wicn-core';
+export interface NavMenuStyle {
+    density: NavMenuDensity;
+    variant: NavMenuVariant;
+    inContent: boolean;
+}
+export declare function setNavMenuStyle(style: NavMenuStyle): void;
+export declare function getNavMenuStyle(): NavMenuStyle;

package/dist/nav-menu/context.svelte.js

@@ -0,0 +1,14 @@
+// libs/wicn-svelte/src/nav-menu/context.svelte.ts
+// Shared Svelte context for the NavMenu style (density from the root, variant
+// from the item). NavMenuTrigger/NavMenuLink read it to resolve their cva
+// directly; NavMenuContent overrides it (relaxed/default + inContent) so
+// dropdown panel links use the plain link style and never inherit the
+// top-level density/variant.
+import { getContext, setContext } from 'svelte';
+const NAV_MENU_STYLE_KEY = Symbol('wicn.nav-menu.style');
+export function setNavMenuStyle(style) {
+    setContext(NAV_MENU_STYLE_KEY, style);
+}
+export function getNavMenuStyle() {
+    return getContext(NAV_MENU_STYLE_KEY) ?? { density: 'relaxed', variant: 'default', inContent: false };
+}

package/dist/nav-menu/index.d.ts

@@ -0,0 +1,13 @@
+export { default as NavMenu } from './NavMenu.svelte';
+export { default as NavMenuList } from './NavMenuList.svelte';
+export { default as NavMenuItem } from './NavMenuItem.svelte';
+export { default as NavMenuTrigger } from './NavMenuTrigger.svelte';
+export { default as NavMenuContent } from './NavMenuContent.svelte';
+export { default as NavMenuLink } from './NavMenuLink.svelte';
+export { default as NavSubMenu } from './NavSubMenu.svelte';
+export { default as NavSubMenuTrigger } from './NavSubMenuTrigger.svelte';
+export { default as NavSubMenuContent } from './NavSubMenuContent.svelte';
+export { default as NavMenuViewport } from './NavMenuViewport.svelte';
+export { default as NavMenuViewportPositioner } from './NavMenuViewportPositioner.svelte';
+export { default as NavMenuIndicator } from './NavMenuIndicator.svelte';
+export { navMenuTriggerStyle, type NavMenuDensity, type NavMenuVariant } from 'wicn-core';

package/dist/nav-menu/index.js

@@ -0,0 +1,14 @@
+// libs/wicn-svelte/src/nav-menu/index.ts
+export { default as NavMenu } from './NavMenu.svelte';
+export { default as NavMenuList } from './NavMenuList.svelte';
+export { default as NavMenuItem } from './NavMenuItem.svelte';
+export { default as NavMenuTrigger } from './NavMenuTrigger.svelte';
+export { default as NavMenuContent } from './NavMenuContent.svelte';
+export { default as NavMenuLink } from './NavMenuLink.svelte';
+export { default as NavSubMenu } from './NavSubMenu.svelte';
+export { default as NavSubMenuTrigger } from './NavSubMenuTrigger.svelte';
+export { default as NavSubMenuContent } from './NavSubMenuContent.svelte';
+export { default as NavMenuViewport } from './NavMenuViewport.svelte';
+export { default as NavMenuViewportPositioner } from './NavMenuViewportPositioner.svelte';
+export { default as NavMenuIndicator } from './NavMenuIndicator.svelte';
+export { navMenuTriggerStyle } from 'wicn-core';

package/dist/navbar/NavbarActions.svelte

@@ -0,0 +1,25 @@
+<!-- libs/wicn-svelte/src/navbar/NavbarActions.svelte -->
+<!-- Source: wicn-react navbar actions (shadcnblocks navbar6/7, re-based on Ark UI) -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { navbarActionsBase, cn } from 'wicn-core';
+  import { getNavbarContext } from './NavbarContext.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const navbar = getNavbarContext();
+  $effect(() => navbar.setSlot('actions', children));
+
+  const classes = $derived(cn(navbarActionsBase, className));
+</script>
+
+<Ark as="div" data-slot="navbar-actions" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/navbar/NavbarActions.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const NavbarActions: import("svelte").Component<Props, {}, "">;
+type NavbarActions = ReturnType<typeof NavbarActions>;
+export default NavbarActions;

package/dist/navbar/NavbarActivationArea.svelte

@@ -0,0 +1,30 @@
+<!-- libs/wicn-svelte/src/navbar/NavbarActivationArea.svelte -->
+<!-- Source: wicn-react navbar activation area (hover reveal for variant="hide") -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { navbarActivationAreaBase, cn } from 'wicn-core';
+  import { getNavbarContext } from './NavbarContext.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const navbar = getNavbarContext();
+  const classes = $derived(cn(navbarActivationAreaBase, className));
+</script>
+
+<Ark
+  as="div"
+  data-slot="navbar-activation-area"
+  class={classes}
+  onmouseenter={() => navbar.setHovered(true)}
+  onmouseleave={() => navbar.setHovered(false)}
+  {...rest}
+>
+  {@render children?.()}
+</Ark>

package/dist/navbar/NavbarActivationArea.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const NavbarActivationArea: import("svelte").Component<Props, {}, "">;
+type NavbarActivationArea = ReturnType<typeof NavbarActivationArea>;
+export default NavbarActivationArea;

package/dist/navbar/NavbarBrand.svelte

@@ -0,0 +1,25 @@
+<!-- libs/wicn-svelte/src/navbar/NavbarBrand.svelte -->
+<!-- Source: wicn-react navbar brand (shadcnblocks navbar6/7, re-based on Ark UI) -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { navbarBrandBase, cn } from 'wicn-core';
+  import { getNavbarContext } from './NavbarContext.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const navbar = getNavbarContext();
+  $effect(() => navbar.setSlot('brand', children));
+
+  const classes = $derived(cn(navbarBrandBase, className));
+</script>
+
+<Ark as="div" data-slot="navbar-brand" class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/navbar/NavbarBrand.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const NavbarBrand: import("svelte").Component<Props, {}, "">;
+type NavbarBrand = ReturnType<typeof NavbarBrand>;
+export default NavbarBrand;

package/dist/navbar/NavbarContainer.svelte

@@ -0,0 +1,26 @@
+<!-- libs/wicn-svelte/src/navbar/NavbarContainer.svelte -->
+<!-- Source: wicn-react navbar container (shadcnblocks navbar6/7, re-based on Ark UI) -->
+<script lang="ts">
+  import { Ark } from '@ark-ui/svelte/factory';
+  import { navbarContainerBase, navbarDensityVariants, navbarShrunkBase, cn } from 'wicn-core';
+  import { getNavbarContext } from './NavbarContext.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    class?: string;
+    children?: Snippet;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const navbar = getNavbarContext();
+  const shrunk = $derived(navbar.variant === 'shrink' && navbar.scrolled);
+  const classes = $derived(
+    cn(navbarContainerBase, navbarDensityVariants({ density: navbar.density }), shrunk && navbarShrunkBase, className),
+  );
+</script>
+
+<Ark as="div" data-slot="navbar-container" data-shrunk={shrunk || undefined} class={classes} {...rest}>
+  {@render children?.()}
+</Ark>

package/dist/navbar/NavbarContainer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    class?: string;
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const NavbarContainer: import("svelte").Component<Props, {}, "">;
+type NavbarContainer = ReturnType<typeof NavbarContainer>;
+export default NavbarContainer;

package/dist/navbar/NavbarContext.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { NavbarDensity, NavbarVariant } from 'wicn-core';
+export interface NavbarContextValue {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    scrolled: boolean;
+    density: NavbarDensity;
+    variant: NavbarVariant;
+    floating: boolean;
+    hovered: boolean;
+    setHovered: (hovered: boolean) => void;
+    slots: {
+        brand?: Snippet;
+        actions?: Snippet;
+    };
+    setSlot: (key: 'brand' | 'actions', node: Snippet | undefined) => void;
+    portalEl: HTMLDivElement | undefined;
+}
+export declare const NAVBAR_CONTEXT_KEY: unique symbol;
+export declare function setNavbarContext(context: NavbarContextValue): void;
+export declare function getNavbarContext(): NavbarContextValue;