Skip navigation

import { cn as merge } from 'cn';
import type { VariantProps } from 'cva';
import { defineConfig } from 'cva/config';
import { getSchema } from 'cva/tools';

export const { cva, cx: cn } = defineConfig({
  cx: merge,
});

export type { VariantProps };
export { getSchema };

import { mergeProps, useRender } from '@base-ui/react';
import { cn } from '@/lib/utils';

/**
 * Groups the skip navigation links.
 * Renders a `<nav>` element.
 *
 * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation)
 */
export namespace Root {
  export type Props = useRender.ComponentProps<'nav'>;
}

export function Root({ className, render, ...props }: Root.Props) {
  const defaultProps: useRender.ElementProps<'nav'> & { 'data-slot'?: string } = {
    'data-slot': 'skip-navigation',
    'aria-label': 'Skip link navigation',
    className: cn('', className),
  };

  return useRender({
    defaultTagName: 'nav',
    render,
    props: mergeProps<'nav'>(defaultProps, props),
  });
}

/**
 * A list of individual skip navigation links.
 * Renders a `<ul>` element.
 *
 * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation)
 */
export namespace List {
  export type Props = useRender.ComponentProps<'ul'>;
}

export function List({ className, render, ...props }: List.Props) {
  const defaultProps: useRender.ElementProps<'ul'> & { 'data-slot'?: string } = {
    'data-slot': 'skip-navigation-list',
    className: cn('', className),
  };

  return useRender({
    defaultTagName: 'ul',
    render,
    props: mergeProps<'ul'>(defaultProps, props),
  });
}

/**
 * An individual skip navigation link.
 * Renders a `<li>` element.
 *
 * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation)
 */
export namespace Item {
  export type Props = useRender.ComponentProps<'li'>;
}

export function Item({ className, render, ...props }: Item.Props) {
  const defaultProps: useRender.ElementProps<'li'> & { 'data-slot'?: string } = {
    'data-slot': 'skip-navigation-item',
    className: cn('', className),
  };

  return useRender({
    defaultTagName: 'li',
    render,
    props: mergeProps<'li'>(defaultProps, props),
  });
}

/**
 * A link that can be used to skip navigation.
 * Renders an `<a>` element.
 *
 * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation)
 */
export namespace Link {
  export type Props = useRender.ComponentProps<'a'>;
}

export function Link({ className, render, ...props }: Link.Props) {
  const defaultProps: useRender.ElementProps<'a'> & { 'data-slot'?: string } = {
    'data-slot': 'skip-navigation-link',
    className: cn(
      'absolute inset-x-0 top-0 bottom-auto z-50 mx-auto inline-block w-fit -translate-y-[150%] transform rounded-b-md bg-background px-6 py-3 text-foreground text-xl outline-none transition-[translate,color] duration-200 will-change-transform focus:translate-y-0 focus:outline-2 focus:outline-primary/80 focus:outline-solid focus:outline-offset-2',
      className
    ),
  };

  return useRender({
    defaultTagName: 'a',
    render,
    props: mergeProps<'a'>(defaultProps, props),
  });
}