Tooltip

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

'use client';

import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
import type * as React from 'react';
import { cn } from '@/lib/utils';

export const createHandle = TooltipPrimitive.createHandle;

/**
 * Provides a shared delay for multiple tooltips. The grouping logic ensures that
 * once a tooltip becomes visible, the adjacent tooltips will be shown instantly.
 *
 * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip)
 *
 * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#provider)
 */
export namespace Provider {
  export type Props = React.ComponentProps<typeof TooltipPrimitive.Provider>;
}

export function Provider({ ...props }: Provider.Props) {
  return <TooltipPrimitive.Provider data-slot="tooltip-provider" {...props} />;
}

/**
 * Groups all parts of the tooltip.
 * Doesn't render its own HTML element.
 *
 * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip)
 *
 * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#root)
 */
export namespace Root {
  export type Actions = TooltipPrimitive.Root.Actions;
  export type State = TooltipPrimitive.Root.State;
  export type Props = React.ComponentProps<typeof TooltipPrimitive.Root>;
  export type ChangeEventDetails = TooltipPrimitive.Root.ChangeEventDetails;
  export type ChangeEventReason = TooltipPrimitive.Root.ChangeEventReason;
}

export function Root({ ...props }: Root.Props) {
  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
}

/**
 * An element to attach the tooltip to.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip)
 *
 * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#trigger)
 */
export namespace Trigger {
  export type State = TooltipPrimitive.Trigger.State;
  export type Props = React.ComponentProps<typeof TooltipPrimitive.Trigger>;
}

export function Trigger({ ...props }: Trigger.Props) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
}

/**
 * Positions the tooltip against the trigger.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip)
 *
 * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#positioner)
 */
export namespace Positioner {
  export type State = TooltipPrimitive.Positioner.State;
  export type Props = React.ComponentProps<typeof TooltipPrimitive.Positioner>;
}

export function Positioner({ className, sideOffset = 10, ...props }: Positioner.Props) {
  return (
    <TooltipPrimitive.Portal data-slot="tooltip-portal">
      <TooltipPrimitive.Positioner
        className={cn(className)}
        data-slot="tooltip-positioner"
        sideOffset={sideOffset}
        {...props}
      />
    </TooltipPrimitive.Portal>
  );
}

/**
 * A container for the tooltip contents.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip)
 *
 * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#popup)
 */
export namespace Popup {
  export type State = TooltipPrimitive.Popup.State;
  export type Props = React.ComponentProps<typeof TooltipPrimitive.Popup>;
}

export function Popup({ className, children, ...props }: Popup.Props) {
  return (
    <TooltipPrimitive.Popup className={cn('', className)} data-slot="tooltip-popup" {...props}>
      <TooltipPrimitive.Viewport data-slot="tooltip-viewport">{children}</TooltipPrimitive.Viewport>
    </TooltipPrimitive.Popup>
  );
}

/**
 * @deprecated Use {@link Popup} instead
 * @see {@link https://caprice-ui.com/docs/components/tooltip}
 */
export const Content = Popup;

/**
 * Displays an element positioned against the tooltip anchor.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Tooltip](https://caprice-ui.com/docs/components/tooltip)
 *
 * API Reference: [Base UI Tooltip](https://base-ui.com/react/components/tooltip#arrow)
 */
export namespace Arrow {
  export type State = TooltipPrimitive.Arrow.State;
  export type Props = React.ComponentProps<typeof TooltipPrimitive.Arrow>;
}

export function Arrow({ className, ...props }: Arrow.Props) {
  return (
    <TooltipPrimitive.Arrow className={cn('', className)} data-slot="tooltip-arrow" {...props} />
  );
}