@casinogate/ui 1.8.8 → 1.9.0

package/dist/components/navigation/components/navigation.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { RefAttachment } from '../../../internal/types/common.js';
 import { Context } from 'runed';
-import { type ReadableBoxedValues, type WithRefProps } from 'svelte-toolbelt';
+import { type ReadableBoxedValues, type WithRefProps, type WritableBoxedValues } from 'svelte-toolbelt';
 import type { NavigationRootProps } from '../types.js';
-export declare const NavigationSubContentStateCtx: Context<NavigationSubContentState>;
+export declare const NavigationSubStateCtx: Context<NavigationSubState>;
 type NavigationRootStateOpts = WithRefProps<ReadableBoxedValues<{
     compact: boolean;
-    popoverProps: NavigationRootProps['popoverProps'];
+    dropdownProps: NavigationRootProps['dropdownProps'];
 }>>;
 export declare class NavigationRootState {
     static create(opts: NavigationRootStateOpts): NavigationRootState;
@@ -35,14 +35,11 @@ export declare class NavigationContentState {
 }
 type NavigationItemStateOpts = WithRefProps<{}>;
 export declare class NavigationItemState {
-    #private;
     static create(opts: NavigationItemStateOpts): NavigationItemState;
     readonly opts: NavigationItemStateOpts;
     readonly attachment: RefAttachment;
     readonly root: NavigationRootState;
     constructor(opts: NavigationItemStateOpts, root: NavigationRootState);
-    get hasSubContent(): boolean;
-    set hasSubContent(value: boolean);
     readonly props: {
         readonly id: string;
         readonly "data-slot": "item";
@@ -54,20 +51,53 @@ type NavigationTriggerStateOpts = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
 }>>;
 export declare class NavigationTriggerState {
-    static create(opts: NavigationTriggerStateOpts, subContent: NavigationSubContentState | null): NavigationTriggerState;
+    static create(opts: NavigationTriggerStateOpts): NavigationTriggerState;
     readonly opts: NavigationTriggerStateOpts;
     readonly attachment: RefAttachment;
     readonly root: NavigationRootState;
-    readonly item: NavigationItemState;
-    readonly subContent: NavigationSubContentState | null;
-    constructor(opts: NavigationTriggerStateOpts, root: NavigationRootState, item: NavigationItemState, subContent: NavigationSubContentState | null);
+    constructor(opts: NavigationTriggerStateOpts, root: NavigationRootState);
     readonly props: {
         readonly id: string;
         readonly "data-slot": "trigger";
-        readonly role: "button";
-        readonly tabindex: 0;
         readonly 'data-disabled': "" | undefined;
-        readonly 'data-sub-content': boolean;
+    };
+}
+type NavigationSubStateOpts = WithRefProps<WritableBoxedValues<{
+    open: boolean;
+}>>;
+export declare class NavigationSubState {
+    static create(opts: NavigationSubStateOpts): NavigationSubState;
+    readonly opts: NavigationSubStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: NavigationRootState;
+    readonly isOpen: boolean;
+    constructor(opts: NavigationSubStateOpts, root: NavigationRootState);
+    setOpen(value: boolean): void;
+    toggle(): void;
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "sub";
+        readonly 'data-compact': boolean;
+        readonly 'data-state': "open" | "closed";
+    };
+}
+type NavigationSubTriggerStateOpts = WithRefProps<ReadableBoxedValues<{
+    disabled: boolean;
+}>>;
+export declare class NavigationSubTriggerState {
+    static create(opts: NavigationSubTriggerStateOpts): NavigationSubTriggerState;
+    readonly opts: NavigationSubTriggerStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: NavigationRootState;
+    readonly sub: NavigationSubState;
+    constructor(opts: NavigationSubTriggerStateOpts, root: NavigationRootState, sub: NavigationSubState);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "sub-trigger";
+        readonly 'data-disabled': "" | undefined;
+        readonly 'data-state': "open" | "closed";
+        readonly 'aria-expanded': boolean;
+        readonly 'aria-haspopup': "menu";
     };
 }
 type NavigationSubContentStateOpts = WithRefProps<{}>;
@@ -76,8 +106,8 @@ export declare class NavigationSubContentState {
     readonly opts: NavigationSubContentStateOpts;
     readonly attachment: RefAttachment;
     readonly root: NavigationRootState;
-    readonly item: NavigationItemState;
-    constructor(opts: NavigationSubContentStateOpts, root: NavigationRootState, item: NavigationItemState);
+    readonly sub: NavigationSubState;
+    constructor(opts: NavigationSubContentStateOpts, root: NavigationRootState, sub: NavigationSubState);
     readonly props: {
         readonly id: string;
         readonly "data-slot": "sub-content";

package/dist/components/navigation/components/navigation.svelte.js

@@ -1,17 +1,19 @@
 import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
 import { boolAttr } from '../../../internal/utils/attrs.js';
 import { keyWithPrefix } from '../../../internal/utils/common.js';
-import { Context } from 'runed';
+import { Context, watch } from 'runed';
 import { attachRef } from 'svelte-toolbelt';
 const NavigationRootStateCtx = new Context(keyWithPrefix('navigation-root'));
 const NavigationItemStateCtx = new Context(keyWithPrefix('navigation-item'));
-export const NavigationSubContentStateCtx = new Context(keyWithPrefix('navigation-sub-content'));
+export const NavigationSubStateCtx = new Context(keyWithPrefix('navigation-sub'));
 const SLOT_ATTR_VALUES = {
     root: 'root',
     content: 'content',
-    subContent: 'sub-content',
     item: 'item',
     trigger: 'trigger',
+    sub: 'sub',
+    subTrigger: 'sub-trigger',
+    subContent: 'sub-content',
 };
 export class NavigationRootState {
     static create(opts) {
@@ -58,18 +60,11 @@ export class NavigationItemState {
     opts;
     attachment;
     root;
-    #hasSubContent = $state(false);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.attachment = attachRef(opts.ref);
     }
-    get hasSubContent() {
-        return this.#hasSubContent;
-    }
-    set hasSubContent(value) {
-        this.#hasSubContent = value;
-    }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.item,
@@ -79,49 +74,94 @@ export class NavigationItemState {
     }));
 }
 export class NavigationTriggerState {
-    static create(opts, subContent) {
-        return new NavigationTriggerState(opts, NavigationRootStateCtx.get(), NavigationItemStateCtx.get(), subContent);
+    static create(opts) {
+        return new NavigationTriggerState(opts, NavigationRootStateCtx.get());
     }
     opts;
     attachment;
     root;
-    item;
-    subContent;
-    constructor(opts, root, item, subContent) {
+    constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        this.item = item;
-        this.subContent = subContent;
         this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.trigger,
-        role: 'button',
-        tabindex: 0,
         'data-disabled': boolAttr(this.opts.disabled.current),
-        'data-sub-content': this.subContent !== null,
         ...this.attachment,
     }));
 }
-export class NavigationSubContentState {
+export class NavigationSubState {
     static create(opts) {
-        return NavigationSubContentStateCtx.set(new NavigationSubContentState(opts, NavigationRootStateCtx.get(), NavigationItemStateCtx.get()));
+        return NavigationSubStateCtx.set(new NavigationSubState(opts, NavigationRootStateCtx.get()));
     }
     opts;
     attachment;
     root;
-    item;
-    constructor(opts, root, item) {
+    isOpen = $derived.by(() => this.opts.open.current);
+    constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        this.item = item;
         this.attachment = attachRef(opts.ref);
-        this.item.hasSubContent = true;
-        $effect.pre(() => {
-            this.item.hasSubContent = true;
+        watch(() => this.root.isCompact, () => {
+            if (this.isOpen && this.root.isCompact) {
+                this.opts.open.current = false;
+            }
         });
     }
+    setOpen(value) {
+        this.opts.open.current = value;
+    }
+    toggle() {
+        this.opts.open.current = !this.opts.open.current;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.sub,
+        'data-compact': this.root.isCompact,
+        'data-state': this.isOpen ? 'open' : 'closed',
+        ...this.attachment,
+    }));
+}
+export class NavigationSubTriggerState {
+    static create(opts) {
+        return new NavigationSubTriggerState(opts, NavigationRootStateCtx.get(), NavigationSubStateCtx.get());
+    }
+    opts;
+    attachment;
+    root;
+    sub;
+    constructor(opts, root, sub) {
+        this.opts = opts;
+        this.root = root;
+        this.sub = sub;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.subTrigger,
+        'data-disabled': boolAttr(this.opts.disabled.current),
+        'data-state': this.sub.isOpen ? 'open' : 'closed',
+        'aria-expanded': this.sub.isOpen,
+        'aria-haspopup': 'menu',
+        ...this.attachment,
+    }));
+}
+export class NavigationSubContentState {
+    static create(opts) {
+        return new NavigationSubContentState(opts, NavigationRootStateCtx.get(), NavigationSubStateCtx.get());
+    }
+    opts;
+    attachment;
+    root;
+    sub;
+    constructor(opts, root, sub) {
+        this.opts = opts;
+        this.root = root;
+        this.sub = sub;
+        this.attachment = attachRef(opts.ref);
+    }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.subContent,

package/dist/components/navigation/components/navigation.trigger.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import { CollapsiblePrimitive } from '../../collapsible/index.js';
-  import ChevronDown from '../../icons/chevron-down.svelte';
-  import { NavigationStylesContext } from '../styles.js';
-  import { PopoverPrimitive } from '../../popover/index.js';
   import { cn, useId } from '../../../internal/utils/common.js';
   import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { cubicInOut } from 'svelte/easing';
+  import { slide } from 'svelte/transition';
+  import { navigationTriggerStyles } from '../styles.js';
   import type { NavigationTriggerProps } from '../types.js';
-  import { NavigationSubContentStateCtx, NavigationTriggerState } from './navigation.svelte.js';
+  import { NavigationSubStateCtx, NavigationTriggerState } from './navigation.svelte.js';
 
   const uid = $props.id();
 
@@ -22,36 +21,34 @@
     ...restProps
   }: NavigationTriggerProps = $props();
 
-  const subContent = NavigationSubContentStateCtx.getOr(null);
+  const subState = NavigationSubStateCtx.getOr(null);
+  const isInsideSub = $derived(subState !== null);
 
-  const isSubTrigger = $derived.by(() => subContent !== null);
-
-  const triggerState = NavigationTriggerState.create(
-    {
-      ref: boxWith(
-        () => ref,
-        (v) => (ref = v)
-      ),
-      id: boxWith(() => id),
-      disabled: boxWith(() => disabled),
-    },
-    subContent
-  );
+  const triggerState = NavigationTriggerState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+    disabled: boxWith(() => disabled),
+  });
 
   const mergedProps = $derived(
-    mergeProps(restProps, triggerState.props, { class: cn(NavigationStylesContext.get().current.trigger(), className) })
+    mergeProps(restProps, triggerState.props, { class: cn(navigationTriggerStyles(), className) })
   );
 
-  const sharedProps = $derived({
+  const attrs = $derived({
     compact: triggerState.root.isCompact,
   });
+
+  const shouldShowLabel = $derived(!triggerState.root.isCompact || isInsideSub);
 </script>
 
 {#snippet content()}
   {#if icon}
     <span
       data-slot="icon"
-      class={cn('cgap:inline-flex cgap:items-center cgap:justify-center cgap:shrink-0 cgap:size-6')}
+      class={cn('cgui:inline-flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:empty:hidden')}
     >
       {@render icon?.()}
     </span>
@@ -59,72 +56,31 @@
 
   {#if label}
     {#if typeof label === 'string'}
-      <span
-        data-slot="label"
-        class={cn('cgui:flex-1 cgui:min-w-0 cgui:text-left cgui:transition-all cgui:duration-250 cgui:ease-in-out', {
-          'cgui:w-0 cgui:opacity-0 cgui:pointer-events-none cgui:hidden': !isSubTrigger && triggerState.root.isCompact,
-        })}
-      >
-        {label}
-      </span>
+      {#if shouldShowLabel}
+        <span
+          data-slot="label"
+          class="cgui:min-w-0 cgui:text-left cgui:whitespace-nowrap cgui:overflow-hidden cgui:flex-1"
+          transition:slide={{ axis: 'x', duration: 250, easing: cubicInOut }}
+        >
+          <span class="cgui:inline-block" transition:slide={{ axis: 'x', duration: 150, easing: cubicInOut }}>
+            {label}
+          </span>
+        </span>
+      {/if}
     {:else}
       {@render label?.({ props: { 'data-slot': 'label' } })}
     {/if}
   {/if}
 {/snippet}
 
-{#snippet popoverTrigger()}
-  <PopoverPrimitive.Trigger>
-    {#snippet child({ props: childProps })}
-      <button {...childProps} {...mergedProps} data-type="popover-trigger">
-        {@render content?.()}
-      </button>
-    {/snippet}
-  </PopoverPrimitive.Trigger>
-{/snippet}
-
-{#snippet collapsibleTrigger()}
-  <CollapsiblePrimitive.Trigger>
-    {#snippet child({ props: childProps, open })}
-      <button {...childProps} {...mergedProps} data-type="collapsible-trigger">
-        {@render content?.()}
-
-        <span
-          data-slot="icon"
-          class={cn(
-            'cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:transition-transform cgui:duration-250 cgui:ease-in-out',
-            {
-              'cgui:rotate-180': open,
-            }
-          )}
-        >
-          <ChevronDown width={24} height={24} />
-        </span>
-      </button>
-    {/snippet}
-  </CollapsiblePrimitive.Trigger>
-{/snippet}
-
-{#snippet buttonTrigger()}
-  <button {...mergedProps}>
-    {@render content?.()}
-  </button>
-{/snippet}
-
-{#snippet linkTrigger()}
+{#if child}
+  {@render child({ props: mergedProps, ...attrs })}
+{:else if href}
   <a {href} {...mergedProps}>
     {@render content?.()}
   </a>
-{/snippet}
-
-{#if child}
-  {@render child({ props: mergedProps, ...sharedProps })}
-{:else if href}
-  {@render linkTrigger?.()}
-{:else if triggerState.item.hasSubContent && triggerState.root.isCompact}
-  {@render popoverTrigger?.()}
-{:else if triggerState.item.hasSubContent && !triggerState.root.isCompact}
-  {@render collapsibleTrigger?.()}
 {:else}
-  {@render buttonTrigger?.()}
+  <button {...mergedProps}>
+    {@render content?.()}
+  </button>
 {/if}

package/dist/components/navigation/exports-primitive.d.ts

@@ -2,4 +2,6 @@ export { default as Content } from './components/navigation.content.svelte';
 export { default as Item } from './components/navigation.item.svelte';
 export { default as Root } from './components/navigation.root.svelte';
 export { default as SubContent } from './components/navigation.sub-content.svelte';
+export { default as SubTrigger } from './components/navigation.sub-trigger.svelte';
+export { default as Sub } from './components/navigation.sub.svelte';
 export { default as Trigger } from './components/navigation.trigger.svelte';

package/dist/components/navigation/exports-primitive.js

@@ -2,4 +2,6 @@ export { default as Content } from './components/navigation.content.svelte';
 export { default as Item } from './components/navigation.item.svelte';
 export { default as Root } from './components/navigation.root.svelte';
 export { default as SubContent } from './components/navigation.sub-content.svelte';
+export { default as SubTrigger } from './components/navigation.sub-trigger.svelte';
+export { default as Sub } from './components/navigation.sub.svelte';
 export { default as Trigger } from './components/navigation.trigger.svelte';

package/dist/components/navigation/exports.d.ts

@@ -1 +1 @@
-export { default as Root } from './navigation.svelte';
+export { createNavigationCollection, default as Root } from './navigation.svelte';

package/dist/components/navigation/exports.js

@@ -1 +1 @@
-export { default as Root } from './navigation.svelte';
+export { createNavigationCollection, default as Root } from './navigation.svelte';

package/dist/components/navigation/index.d.ts

@@ -1,3 +1,4 @@
 export * as NavigationPrimitive from './exports-primitive.js';
 export * as Navigation from './exports.js';
-export type { NavigationContentProps, NavigationItemProps, NavigationItemValue, NavigationProps, NavigationRootProps, NavigationSubContentProps, NavigationTriggerProps, } from './types.js';
+export { createNavigationCollection } from './navigation.svelte';
+export type { NavigationCollection, NavigationCollectionOptions, NavigationContentProps, NavigationItem, NavigationItemAction, NavigationItemBase, NavigationItemLink, NavigationItemProps, NavigationItemSeparator, NavigationItemSub, NavigationProps, NavigationRootProps, NavigationSelectableItem, NavigationSubContentProps, NavigationSubProps, NavigationSubTriggerProps, NavigationTriggerProps, } from './types.js';

package/dist/components/navigation/index.js

@@ -1,2 +1,3 @@
 export * as NavigationPrimitive from './exports-primitive.js';
 export * as Navigation from './exports.js';
+export { createNavigationCollection } from './navigation.svelte';

package/dist/components/navigation/navigation.svelte

@@ -1,36 +1,121 @@
+<script lang="ts" module>
+  import { createListCollection } from '../../internal/index.js';
+  import type { ListCollection } from '../../internal/lib/collection/index.js';
+  import type {
+    NavigationCollectionOptions,
+    NavigationItem,
+    NavigationItemAction,
+    NavigationItemLink,
+    NavigationItemSub,
+    NavigationSelectableItem,
+  } from './types.js';
+
+  export function createNavigationCollection(options: NavigationCollectionOptions): ListCollection<NavigationItem> {
+    const { items } = options;
+
+    return createListCollection({
+      items,
+      itemToValue: (item) => item.key,
+      itemToString: (item) => {
+        return item.label;
+      },
+      isItemDisabled: (item) => {
+        return !!item.disabled;
+      },
+    });
+  }
+
+  function isLink(item: NavigationSelectableItem): item is NavigationItemLink {
+    return item.type === 'link';
+  }
+
+  function isSub(item: NavigationSelectableItem): item is NavigationItemSub {
+    return item.type === 'sub';
+  }
+
+  function isAction(item: NavigationSelectableItem): item is NavigationItemAction {
+    return item.type === 'action';
+  }
+</script>
+
 <script lang="ts">
-  import Content from './components/navigation.content.svelte';
-  import Item from './components/navigation.item.svelte';
-  import Root from './components/navigation.root.svelte';
-  import SubContent from './components/navigation.sub-content.svelte';
-  import Trigger from './components/navigation.trigger.svelte';
+  import * as Primitive from './exports-primitive.js';
   import type { NavigationProps } from './types.js';
 
-  let { items, ref = $bindable(null), compact = $bindable(false), ...restProps }: NavigationProps = $props();
+  let {
+    collection,
+    ref = $bindable(null),
+    compact = $bindable(false),
+    contentClass,
+    item: itemSnippet,
+    ...restProps
+  }: NavigationProps = $props();
+
+  const items = $derived(collection.items);
 </script>
 
-<Root bind:ref bind:compact {...restProps}>
-  <Content>
-    {#each items as item (item.key)}
-      <Item>
-        <Trigger label={item.label} {...'href' in item ? { href: item.href } : {}}>
-          {#snippet icon()}
-            {#if item.icon}
-              <item.icon width={24} height={24} />
-            {/if}
-          {/snippet}
-        </Trigger>
-
-        {#if 'children' in item}
-          <SubContent>
-            {#each item.children as child (child.key)}
-              <Item>
-                <Trigger label={child.label} href={child.href} />
-              </Item>
-            {/each}
-          </SubContent>
+{#snippet defaultSubRenderer(item: NavigationItemSub)}
+  <Primitive.Sub>
+    <Primitive.SubTrigger label={item.label} disabled={item.disabled}>
+      {#snippet icon()}
+        {#if item.icon}
+          <item.icon width={24} height={24} />
         {/if}
-      </Item>
+      {/snippet}
+    </Primitive.SubTrigger>
+
+    <Primitive.SubContent>
+      {#each item.children as child (child.key)}
+        {@render renderItem(child)}
+      {/each}
+    </Primitive.SubContent>
+  </Primitive.Sub>
+{/snippet}
+
+{#snippet defaultLinkRenderer(item: NavigationItemLink)}
+  <Primitive.Item>
+    <Primitive.Trigger label={item.label} href={item.href} disabled={item.disabled}>
+      {#snippet icon()}
+        {#if item.icon}
+          <item.icon width={24} height={24} />
+        {/if}
+      {/snippet}
+    </Primitive.Trigger>
+  </Primitive.Item>
+{/snippet}
+
+{#snippet defaultActionRenderer(item: NavigationItemAction)}
+  <Primitive.Item>
+    <Primitive.Trigger label={item.label} disabled={item.disabled}>
+      {#snippet icon()}
+        {#if item.icon}
+          <item.icon width={24} height={24} />
+        {/if}
+      {/snippet}
+    </Primitive.Trigger>
+  </Primitive.Item>
+{/snippet}
+
+{#snippet renderItem(item: NavigationSelectableItem)}
+  {#if itemSnippet}
+    <Primitive.Item>
+      {#snippet child({ props })}
+        {@render itemSnippet({ item, props })}
+      {/snippet}
+    </Primitive.Item>
+  {:else if isSub(item)}
+    {@render defaultSubRenderer(item)}
+  {:else if isLink(item)}
+    {@render defaultLinkRenderer(item)}
+  {:else if isAction(item)}
+    {@render defaultActionRenderer(item)}
+  {/if}
+{/snippet}
+
+<Primitive.Root bind:ref bind:compact {...restProps}>
+  <Primitive.Content class={contentClass}>
+    {#each items as item (item.key)}
+      {@render renderItem(item)}
     {/each}
-  </Content>
-</Root>
+  </Primitive.Content>
+</Primitive.Root>

package/dist/components/navigation/navigation.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { ListCollection } from '../../internal/lib/collection/index.js';
+import type { NavigationCollectionOptions, NavigationItem } from './types.js';
+export declare function createNavigationCollection(options: NavigationCollectionOptions): ListCollection<NavigationItem>;
 import type { NavigationProps } from './types.js';
 declare const Navigation: import("svelte").Component<NavigationProps, {}, "ref" | "compact">;
 type Navigation = ReturnType<typeof Navigation>;

package/dist/components/navigation/styles.d.ts

@@ -1,38 +1,29 @@
-import { Context } from 'runed';
-import type { ReadableBox } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
-export declare const navigationVariants: import("tailwind-variants").TVReturnType<{
+export declare const navigationRootStyles: import("tailwind-variants").TVReturnType<{
     compact: {
         true: {};
     };
-}, {
-    root: string[];
-    content: string[];
-    item: never[];
-    subContent: string[];
-    trigger: string[];
-}, undefined, {
+}, undefined, string[], {
     compact: {
         true: {};
     };
-}, {
-    root: string[];
-    content: string[];
-    item: never[];
-    subContent: string[];
-    trigger: string[];
-}, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnType<{
     compact: {
         true: {};
     };
-}, {
-    root: string[];
-    content: string[];
-    item: never[];
-    subContent: string[];
-    trigger: string[];
-}, undefined, unknown, unknown, undefined>>;
-export type NavigationVariantsProps = VariantProps<typeof navigationVariants>;
-type NavigationStylesContextValues = ReadableBox<ReturnType<typeof navigationVariants>>;
-export declare const NavigationStylesContext: Context<NavigationStylesContextValues>;
-export {};
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const navigationContentStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const navigationItemStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, never[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, never[], unknown, unknown, undefined>>;
+export declare const navigationTriggerStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const navigationSubStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, never[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, never[], unknown, unknown, undefined>>;
+export declare const navigationSubTriggerStyles: import("tailwind-variants").TVReturnType<{} | {} | {} | {}, undefined, string[], {} | {} | {}, undefined, import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>>;
+export declare const navigationSubContentStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const navigationDropdownContentStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type NavigationRootVariantsProps = VariantProps<typeof navigationRootStyles>;
+export type NavigationContentVariantsProps = VariantProps<typeof navigationContentStyles>;
+export type NavigationItemVariantsProps = VariantProps<typeof navigationItemStyles>;
+export type NavigationTriggerVariantsProps = VariantProps<typeof navigationTriggerStyles>;
+export type NavigationSubVariantsProps = VariantProps<typeof navigationSubStyles>;
+export type NavigationSubTriggerVariantsProps = VariantProps<typeof navigationSubTriggerStyles>;
+export type NavigationSubContentVariantsProps = VariantProps<typeof navigationSubContentStyles>;
+export type NavigationDropdownContentVariantsProps = VariantProps<typeof navigationDropdownContentStyles>;