Preview Card

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 };

import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
import type * as React from 'react';

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

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

/**
 * A link that opens the preview card.
 * Renders an `<a>` element.
 *
 * Documentation: [Caprice UI Preview Card](https://caprice-ui.com/docs/components/preview-card)
 *
 * API Reference: [Base UI Preview Card](https://base-ui.com/react/components/preview-card#trigger)
 */
export namespace Trigger {
  export type State = PreviewCardPrimitive.Trigger.State;
  export type Props = React.ComponentProps<typeof PreviewCardPrimitive.Trigger>;
}

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

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

export function Content({ className, children, ...props }: Content.Props) {
  return (
    <PreviewCardPrimitive.Portal data-slot="preview-card-portal">
      <PreviewCardPrimitive.Backdrop data-slot="preview-card-backdrop" />
      <PreviewCardPrimitive.Positioner className={className} {...props}>
        <PreviewCardPrimitive.Popup data-slot="preview-card-popup">
          <PreviewCardPrimitive.Arrow data-slot="preview-card-arrow" />
          {children}
        </PreviewCardPrimitive.Popup>
      </PreviewCardPrimitive.Positioner>
    </PreviewCardPrimitive.Portal>
  );
}