import { cva } from 'class-variance-authority';

export { default as NavigationMenu } from './NavigationMenu.vue';
export { default as NavigationMenuContent } from './NavigationMenuContent.vue';
export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue';
export { default as NavigationMenuItem } from './NavigationMenuItem.vue';
export { default as NavigationMenuLink } from './NavigationMenuLink.vue';
export { default as NavigationMenuList } from './NavigationMenuList.vue';
export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue';
export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue';

// Surface-hierarchy-aligned navigation trigger styling:
//   - default:   transparent bg, `text-content-on-surface-primary`
//   - hover:     bg switches to `background-surface-muted` (the muted
//                "highlighted inner container" surface token)
//   - active:    same muted surface bg on `[data-active]` and on
//                `[data-state=open]` so open triggers read as pressed
//   - focus:     matches UiButton's focus recipe — focus-ring border +
//                tinted ring shadow, 3px wide (no plain `:focus` bg —
//                pointer hovers and kb focus are decoupled here)
export const navigationMenuTriggerStyle = cva(
  'group inline-flex h-9 w-max items-center justify-center rounded-md border border-transparent bg-transparent px-4 py-2 text-sm font-medium text-content-on-surface-primary transition-[color,box-shadow,border-color] outline-none hover:bg-background-surface-muted data-[state=open]:bg-background-surface-muted data-[active]:bg-background-surface-muted disabled:pointer-events-none disabled:opacity-50 focus-visible:border-border-surface-focus-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
);
