@urbicon-ui/blocks 6.1.4

package/dist/primitives/Input/input.variants.js

@@ -0,0 +1,169 @@
+import { tv } from '../../utils/variants';
+export const inputVariants = tv({
+    slots: {
+        wrapper: ['flex flex-col w-full gap-1.5'],
+        container: ['relative flex items-center'],
+        base: [
+            'w-full box-border transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            // Radius driven by `tier` axis below.
+            'focus-visible:outline-none',
+            'border text-text-primary bg-surface-base placeholder:text-text-quaternary',
+            'hover:border-border-default focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20',
+            'disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-subtle',
+            'read-only:bg-surface-subtle read-only:cursor-default'
+        ],
+        label: ['block font-medium text-text-secondary text-sm'],
+        message: ['text-xs mt-1.5'],
+        iconContainer: [
+            'absolute top-0 bottom-0 flex items-center justify-center z-10 pointer-events-none'
+        ],
+        iconButton: [
+            'pointer-events-auto inline-flex items-center justify-center rounded-modify cursor-pointer',
+            'text-text-tertiary hover:text-text-primary hover:bg-surface-hover',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+            'transition-colors duration-[var(--blocks-duration-fast)]',
+            'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent'
+        ],
+        iconDecoration: [
+            'pointer-events-none inline-flex items-center justify-center text-text-tertiary'
+        ]
+    },
+    variants: {
+        // 3-tier semantic radius. Default `modify` (soft) — inputs read as
+        // tap areas / fields, not CTAs. Opt-in `commit` (pill) for search
+        // bars, marketing newsletter inputs, or OS-style command bars.
+        // Usually inherited from a wrapping <Toolbar tier="commit"> via
+        // TierContext when appropriate.
+        tier: {
+            modify: { base: 'rounded-modify' },
+            commit: { base: 'rounded-commit' }
+        },
+        variant: {
+            outlined: {
+                base: 'border-border-subtle'
+            },
+            filled: {
+                base: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-visible:bg-surface-base'
+            },
+            ghost: {
+                base: 'bg-transparent hover:bg-surface-subtle focus-visible:bg-surface-base focus-visible:border-border-subtle'
+            },
+            underline: {
+                base: 'bg-transparent border-0 border-b-2 border-border-subtle rounded-none focus-visible:ring-0'
+            }
+        },
+        size: {
+            xs: {
+                base: 'h-7 px-2 text-xs',
+                iconContainer: 'w-7',
+                iconButton: 'p-0.5 [&_svg]:w-3 [&_svg]:h-3',
+                iconDecoration: '[&_svg]:w-3 [&_svg]:h-3'
+            },
+            sm: {
+                base: 'h-8 px-3 text-sm',
+                iconContainer: 'w-8',
+                iconButton: 'p-0.5 [&_svg]:w-3.5 [&_svg]:h-3.5',
+                iconDecoration: '[&_svg]:w-3.5 [&_svg]:h-3.5'
+            },
+            md: {
+                base: 'h-10 px-4 text-base',
+                iconContainer: 'w-10',
+                iconButton: 'p-1 [&_svg]:w-4 [&_svg]:h-4',
+                iconDecoration: '[&_svg]:w-4 [&_svg]:h-4'
+            },
+            lg: {
+                base: 'h-12 px-6 text-lg',
+                iconContainer: 'w-12',
+                iconButton: 'p-1 [&_svg]:w-5 [&_svg]:h-5',
+                iconDecoration: '[&_svg]:w-5 [&_svg]:h-5'
+            },
+            xl: {
+                base: 'h-14 px-8 text-xl',
+                iconContainer: 'w-14',
+                iconButton: 'p-1.5 [&_svg]:w-6 [&_svg]:h-6',
+                iconDecoration: '[&_svg]:w-6 [&_svg]:h-6'
+            }
+        },
+        intent: {
+            default: {},
+            success: {
+                base: 'border-success focus-visible:border-success focus-visible:ring-success/20',
+                message: 'text-success'
+            },
+            warning: {
+                base: 'border-warning focus-visible:border-warning focus-visible:ring-warning/20',
+                message: 'text-warning-emphasis'
+            },
+            danger: {
+                base: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20',
+                message: 'text-danger'
+            }
+        },
+        disabled: {
+            true: {
+                base: 'opacity-50 cursor-not-allowed bg-surface-disabled pointer-events-none',
+                label: 'text-text-disabled'
+            }
+        },
+        readonly: {
+            true: {
+                base: 'bg-surface-subtle cursor-default'
+            }
+        },
+        error: {
+            true: {
+                base: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20',
+                message: 'text-danger'
+            }
+        },
+        required: {
+            true: {
+                label: "after:content-['*'] after:ml-1 after:text-danger"
+            }
+        },
+        hasLeftIcon: { true: {} },
+        hasRightIcon: { true: {} },
+        messageType: {
+            error: { message: 'text-danger' },
+            helper: { message: 'text-text-tertiary' }
+        },
+        iconPosition: {
+            left: { iconContainer: 'left-0' },
+            right: { iconContainer: 'right-0' }
+        }
+    },
+    compoundVariants: [
+        // Ghost keeps a transparent border in its resting state — even when an
+        // intent would otherwise colour it. The error state intentionally drops
+        // this override so validation feedback (`border-danger`) stays visible.
+        {
+            variant: 'ghost',
+            error: false,
+            class: { base: 'border-transparent' }
+        },
+        { hasLeftIcon: true, size: 'xs', class: { base: 'pl-7' } },
+        { hasLeftIcon: true, size: 'sm', class: { base: 'pl-8' } },
+        { hasLeftIcon: true, size: 'md', class: { base: 'pl-10' } },
+        { hasLeftIcon: true, size: 'lg', class: { base: 'pl-12' } },
+        { hasLeftIcon: true, size: 'xl', class: { base: 'pl-14' } },
+        { hasRightIcon: true, size: 'xs', class: { base: 'pr-7' } },
+        { hasRightIcon: true, size: 'sm', class: { base: 'pr-8' } },
+        { hasRightIcon: true, size: 'md', class: { base: 'pr-10' } },
+        { hasRightIcon: true, size: 'lg', class: { base: 'pr-12' } },
+        { hasRightIcon: true, size: 'xl', class: { base: 'pr-14' } }
+    ],
+    defaultVariants: {
+        tier: 'modify',
+        variant: 'outlined',
+        size: 'md',
+        intent: 'default',
+        disabled: false,
+        readonly: false,
+        error: false,
+        required: false,
+        hasLeftIcon: false,
+        hasRightIcon: false,
+        messageType: 'helper',
+        iconPosition: 'left'
+    }
+});

package/dist/primitives/Menu/Menu.svelte

@@ -0,0 +1,493 @@
+<script lang="ts" generics="TItem extends MenuItemType = MenuItemType">
+  import { useBlocksI18n } from '../..';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { Button, menuVariants } from '..';
+  import { resolveIcon } from '../../icons';
+  import ChevronDownIconDefault from '../../icons/ChevronDownIcon.svelte';
+  import { getTierContext } from '../../utils/tier-context';
+  const ChevronDownIcon = resolveIcon('chevronDown', ChevronDownIconDefault);
+  import Popover from '../Popover/Popover.svelte';
+  import { setMenuContext, type MenuContext, type MenuRegistryItem } from './menu.context';
+  import MenuItemComp from './MenuItem.svelte';
+  import MenuSubmenu from './MenuSubmenu.svelte';
+  import type { MenuItemType, MenuObjectOption, MenuSectionHeader, MenuProps } from './index';
+
+  const bt = useBlocksI18n();
+
+  let {
+    items = [],
+    placeholder = bt('menu.placeholder'),
+    getItemLabel,
+    getItemId,
+    getItemDisabled,
+    getItemChildren,
+    getItemIcon,
+    isSection: isSectionMapper,
+    getSectionLabel,
+    disabled = false,
+    loading = false,
+    open = $bindable(false),
+    id: idProp,
+    placement = 'bottom-start',
+    syncWidth = true,
+    usePortal = true,
+    customTrigger,
+    customItem,
+    customHeader,
+    customFooter,
+    variant = 'outlined',
+    size = 'md',
+    itemSize: itemSizeProp,
+    intent = 'neutral',
+    tier,
+    mint = 'none',
+    chevronAnimation = 'rotate',
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    children,
+    ...restProps
+  }: MenuProps<TItem> = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.Menu?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'Menu', preset),
+      slotClassesProp
+    )
+  );
+
+  const propsId = $props.id();
+  const rootId = $derived(idProp ?? `menu-${propsId}`);
+
+  // Tier resolution: explicit prop wins, otherwise inherit from a wrapping
+  // <Toolbar tier> / <ButtonGroup tier>, otherwise default to `commit` —
+  // Menu is an Action surface, matching `<Button>`'s default tier.
+  const tierCtx = getTierContext();
+  const effectiveTier = $derived(tier ?? tierCtx?.tier ?? 'commit');
+
+  let triggerRef = $state<HTMLElement>();
+  let panelRef = $state<HTMLElement>();
+  let openSubMenus = $state<Set<string>>(new Set());
+  const childrenMode = $derived(!!children);
+
+  // Map of declarative MenuItems by id — populated via the context's
+  // `registerItem` / `unregisterItem` hooks. Used to debug + (in future)
+  // power type-ahead search; the keyboard model itself walks DOM-focusable
+  // descendants directly so it works in array-mode too.
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity -- internal registry, not reactive UI state
+  const registryBuffer: Map<string, MenuRegistryItem> = new Map();
+
+  // ── Item-shape mappers ─────────────────────────────────────────────────
+  function isSectionItem(it: MenuItemType): it is MenuSectionHeader {
+    if (isSectionMapper) return isSectionMapper(it);
+    return typeof it === 'object' && it !== null && (it as MenuSectionHeader).type === 'section';
+  }
+
+  function resolveLabel(item: TItem): string {
+    if (getItemLabel) return getItemLabel(item);
+    if (typeof item === 'string') return item;
+    if (typeof item === 'object' && item !== null) {
+      return ((item as MenuObjectOption).label as string | undefined) ?? '';
+    }
+    return String(item);
+  }
+
+  function resolveId(item: TItem, fallbackIndex: number): string {
+    if (getItemId) return getItemId(item);
+    if (typeof item === 'string') return item;
+    if (typeof item === 'object' && item !== null) {
+      return ((item as MenuObjectOption).id as string | undefined) ?? `item-${fallbackIndex}`;
+    }
+    return `item-${fallbackIndex}`;
+  }
+
+  function resolveDisabled(item: TItem): boolean {
+    if (getItemDisabled) return getItemDisabled(item);
+    if (typeof item === 'object' && item !== null) {
+      return Boolean((item as MenuObjectOption).disabled);
+    }
+    return false;
+  }
+
+  function resolveChildren(item: TItem): MenuItemType[] | undefined {
+    if (getItemChildren) return getItemChildren(item);
+    if (typeof item === 'object' && item !== null) {
+      return (item as MenuObjectOption).children;
+    }
+    return undefined;
+  }
+
+  function resolveIconForItem(item: TItem): unknown {
+    if (getItemIcon) return getItemIcon(item);
+    if (typeof item === 'object' && item !== null) {
+      return (item as MenuObjectOption).icon;
+    }
+    return undefined;
+  }
+
+  // ── Open / close lifecycle ─────────────────────────────────────────────
+  function toggle() {
+    if (disabled || loading) return;
+    open = !open;
+  }
+
+  function dismiss() {
+    open = false;
+    triggerRef?.focus();
+  }
+
+  function onItemActivated(keepOpen?: boolean) {
+    if (keepOpen) return;
+    dismiss();
+  }
+
+  // ── Sub-menu state ─────────────────────────────────────────────────────
+  function isSubMenuOpen(id: string) {
+    return openSubMenus.has(id);
+  }
+
+  function toggleSubMenu(id: string) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- copy + reassign keeps `openSubMenus` reactive
+    const next = new Set(openSubMenus);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    openSubMenus = next;
+  }
+
+  // ── Registry (debug + type-ahead hook) ────────────────────────────────
+  function registerItem(item: MenuRegistryItem) {
+    if (registryBuffer.has(item.id) && import.meta.env?.DEV) {
+      console.warn(
+        `[Menu] duplicate item id "${item.id}" — the second registration overrides the first.`
+      );
+    }
+    registryBuffer.set(item.id, item);
+  }
+
+  function unregisterItem(id: string) {
+    registryBuffer.delete(id);
+  }
+
+  // ── Roving tabindex / arrow-key navigation ────────────────────────────
+  //
+  // W3C menu pattern: only one item is in the tab order at a time; arrow
+  // keys move focus between items; Tab moves focus OUT of the menu.
+  // We walk the rendered DOM (works for both array-mode and declarative
+  // children, and for nested sub-menus) instead of the registry, so the
+  // navigation always reflects what the user actually sees.
+  function getFocusableItems(): HTMLElement[] {
+    if (!panelRef) return [];
+    return Array.from(
+      panelRef.querySelectorAll<HTMLElement>(
+        '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])'
+      )
+    );
+  }
+
+  function focusNextItem(current: HTMLElement) {
+    const items = getFocusableItems();
+    if (items.length === 0) return;
+    const idx = items.indexOf(current);
+    const next = items[(idx + 1) % items.length] ?? items[0];
+    next.focus();
+  }
+
+  function focusPrevItem(current: HTMLElement) {
+    const items = getFocusableItems();
+    if (items.length === 0) return;
+    const idx = items.indexOf(current);
+    const prev = items[(idx - 1 + items.length) % items.length] ?? items[items.length - 1];
+    prev.focus();
+  }
+
+  function focusFirstItem() {
+    const items = getFocusableItems();
+    items[0]?.focus();
+  }
+
+  function focusLastItem() {
+    const items = getFocusableItems();
+    items[items.length - 1]?.focus();
+  }
+
+  // When the menu opens, move focus into it (W3C menu pattern: focus on
+  // the first item). Skipping this step would leave focus on the trigger
+  // and arrow-key navigation would not work until the user clicked.
+  $effect(() => {
+    if (!open) return;
+    queueMicrotask(() => focusFirstItem());
+  });
+
+  function itemSizeForDepth(_depth: number): 'sm' | 'md' | 'lg' {
+    if (itemSizeProp) return itemSizeProp;
+    if (size === 'sm' || size === 'md' || size === 'lg') return size;
+    if (size === 'xs' || size === '2xs') return 'sm';
+    if (size === 'xl') return 'lg';
+    return 'md';
+  }
+
+  const styles = $derived(
+    menuVariants({
+      open,
+      itemSize: itemSizeForDepth(0),
+      syncWidth,
+      placement,
+      chevronAnimation,
+      usePortal,
+      // Drives the floating panel's corner radius via the `tier` axis on
+      // menuVariants — keeps the panel visually attached to its trigger
+      // (e.g. pill trigger → rounded-lg panel instead of near-flat
+      // rounded-contain).
+      tier: effectiveTier
+    })
+  );
+
+  const ctx: MenuContext = {
+    get rootId() {
+      return rootId;
+    },
+    get size() {
+      return itemSizeForDepth(0);
+    },
+    get intent() {
+      return intent;
+    },
+    get mint() {
+      return mint;
+    },
+    get disabled() {
+      return disabled;
+    },
+    get unstyled() {
+      return unstyled;
+    },
+    get slotClasses() {
+      return slotClasses;
+    },
+    get styles() {
+      return styles;
+    },
+    onItemActivated,
+    focusNextItem,
+    focusPrevItem,
+    focusFirstItem,
+    focusLastItem,
+    isSubMenuOpen,
+    toggleSubMenu,
+    registerItem,
+    unregisterItem,
+    itemSizeForDepth
+  };
+  setMenuContext(ctx);
+
+  // Panel-level keyboard model. Handles arrow-key navigation, Home/End,
+  // and Escape — individual MenuItem buttons forward Enter/Space + arrow
+  // keys to here via their own onkeydown handler.
+  function handlePanelKeydown(e: KeyboardEvent) {
+    const target = e.target as HTMLElement | null;
+    const focused =
+      target?.getAttribute('role') === 'menuitem'
+        ? target
+        : (document.activeElement as HTMLElement | null);
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (focused) focusNextItem(focused);
+        else focusFirstItem();
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        if (focused) focusPrevItem(focused);
+        else focusLastItem();
+        break;
+      case 'Home':
+        e.preventDefault();
+        focusFirstItem();
+        break;
+      case 'End':
+        e.preventDefault();
+        focusLastItem();
+        break;
+      case 'Escape':
+        e.preventDefault();
+        dismiss();
+        break;
+      case 'Tab':
+        // W3C menu pattern: Tab moves focus OUT of the menu — close and let
+        // the browser take the next tab stop.
+        dismiss();
+        break;
+    }
+  }
+</script>
+
+<div
+  data-menu-root
+  data-menu-open={open || undefined}
+  class={[unstyled ? slotClasses?.base : styles.base({ class: slotClasses?.base }), className]
+    .filter(Boolean)
+    .join(' ')}
+  {...restProps}
+>
+  {#snippet triggerContent()}
+    {#if customTrigger}
+      {@render customTrigger(toggle, open, dismiss)}
+    {:else}
+      <Button
+        {variant}
+        {size}
+        {intent}
+        tier={effectiveTier}
+        {disabled}
+        {loading}
+        {mint}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onclick={toggle}
+        onkeydown={(e: KeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            toggle();
+          }
+        }}
+        slotClasses={{ content: 'flex-1 w-full justify-between' }}
+        class={unstyled
+          ? (slotClasses?.trigger ?? '')
+          : styles.trigger({ class: slotClasses?.trigger })}
+      >
+        <span
+          class={[unstyled ? '' : styles.triggerText(), slotClasses?.triggerText]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          {placeholder}
+        </span>
+        <ChevronDownIcon
+          class={unstyled
+            ? (slotClasses?.chevron ?? '')
+            : styles.chevron({ class: slotClasses?.chevron })}
+        />
+      </Button>
+    {/if}
+  {/snippet}
+
+  <!--
+    `unstyled` here strips Popover's default surface (background, border,
+    shadow, padding, min/max-width) so the Menu's own `content` slot is the
+    only painted layer. Without this, the panel renders as two stacked
+    surfaces (Popover wrapper + Menu content) and shows a near-empty box
+    with double borders.
+  -->
+  <Popover
+    bind:open
+    placement={placement as import('../../utils/floating').Placement}
+    bind:triggerElement={triggerRef}
+    {usePortal}
+    autoTrigger={false}
+    unstyled
+    syncMinWidth={syncWidth}
+    offsetDistance={effectiveTier === 'commit' ? 8 : 4}
+    trigger={triggerContent}
+  >
+    <div
+      bind:this={panelRef}
+      role="menu"
+      tabindex={-1}
+      onkeydown={handlePanelKeydown}
+      class={unstyled
+        ? (slotClasses?.content ?? '')
+        : styles.content({ class: slotClasses?.content })}
+    >
+      {#if customHeader}
+        <div
+          class={unstyled
+            ? (slotClasses?.header ?? '')
+            : styles.header({ class: slotClasses?.header })}
+        >
+          {@render customHeader()}
+        </div>
+      {/if}
+
+      <div
+        class={unstyled ? (slotClasses?.items ?? '') : styles.items({ class: slotClasses?.items })}
+      >
+        {#if childrenMode}
+          {@render children?.()}
+        {:else}
+          {#each items as item, i (resolveId(item as TItem, i))}
+            {#if isSectionItem(item)}
+              {@const section = item as MenuSectionHeader}
+              <div
+                role="presentation"
+                class={unstyled
+                  ? (slotClasses?.section ?? '')
+                  : styles.section({ class: slotClasses?.section })}
+              >
+                {getSectionLabel ? getSectionLabel(section) : section.label}
+              </div>
+            {:else}
+              {@const typedItem = item as TItem}
+              {@const itemId = resolveId(typedItem, i)}
+              {@const itemLabel = resolveLabel(typedItem)}
+              {@const itemDisabled = resolveDisabled(typedItem)}
+              {@const itemChildren = resolveChildren(typedItem)}
+              {@const itemIcon = resolveIconForItem(typedItem)}
+              {@const opt = typeof typedItem === 'object' ? (typedItem as MenuObjectOption) : null}
+
+              {#if itemChildren && itemChildren.length > 0}
+                <MenuSubmenu
+                  id={itemId}
+                  label={itemLabel}
+                  disabled={itemDisabled}
+                  icon={itemIcon}
+                  items={itemChildren}
+                />
+              {:else if customItem}
+                <MenuItemComp
+                  id={itemId}
+                  label={itemLabel}
+                  disabled={itemDisabled}
+                  icon={itemIcon}
+                  onSelect={opt?.onSelect}
+                  keepOpen={opt?.keepOpen}
+                >
+                  {@render customItem(typedItem)}
+                </MenuItemComp>
+              {:else}
+                <!-- Without a customItem snippet, render MenuItem *without*
+                     a children block — passing `{#if customItem}{/if}` would
+                     hand MenuItem a truthy-but-empty snippet, and its
+                     `{#if children}` short-circuit would then skip the
+                     fallback `{label}` render and the item would appear
+                     blank. -->
+                <MenuItemComp
+                  id={itemId}
+                  label={itemLabel}
+                  disabled={itemDisabled}
+                  icon={itemIcon}
+                  onSelect={opt?.onSelect}
+                  keepOpen={opt?.keepOpen}
+                />
+              {/if}
+            {/if}
+          {/each}
+        {/if}
+      </div>
+
+      {#if customFooter}
+        <div
+          class={unstyled
+            ? (slotClasses?.footer ?? '')
+            : styles.footer({ class: slotClasses?.footer })}
+        >
+          {@render customFooter()}
+        </div>
+      {/if}
+    </div>
+  </Popover>
+</div>

package/dist/primitives/Menu/Menu.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { MenuItemType, MenuProps } from './index';
+declare function $$render<TItem extends MenuItemType = MenuItemType>(): {
+    props: MenuProps<TItem>;
+    exports: {};
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TItem extends MenuItemType = MenuItemType> {
+    props(): ReturnType<typeof $$render<TItem>>['props'];
+    events(): ReturnType<typeof $$render<TItem>>['events'];
+    slots(): ReturnType<typeof $$render<TItem>>['slots'];
+    bindings(): "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TItem extends MenuItemType = MenuItemType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<TItem>['exports']>;
+    <TItem extends MenuItemType = MenuItemType>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Menu: $$IsomorphicComponent;
+type Menu<TItem extends MenuItemType = MenuItemType> = InstanceType<typeof Menu<TItem>>;
+export default Menu;