Preview Card

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

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#content) */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>  );}