Preview-card

1"use client";
2
3import * as React from "react";
4import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
5
6import { cn } from "@/lib/utils";
7import {
8  solidSurface,
9  type SurfaceLevel,
10} from "@/registry/default/lib/elevated";
11
12function PreviewCard({
13  ...props
14}: React.ComponentProps<typeof BasePreviewCard.Root>) {
15  return <BasePreviewCard.Root data-slot="preview-card" {...props} />;
16}
17
18function PreviewCardTrigger({
19  delay = 0,
20  closeDelay = 0,
21  ...props
22}: React.ComponentProps<typeof BasePreviewCard.Trigger>) {
23  return (
24    <BasePreviewCard.Trigger
25      data-slot="preview-card-trigger"
26      delay={delay}
27      closeDelay={closeDelay}
28      {...props}
29    />
30  );
31}
32
33function PreviewCardPortal({
34  ...props
35}: React.ComponentProps<typeof BasePreviewCard.Portal>) {
36  return <BasePreviewCard.Portal data-slot="preview-card-portal" {...props} />;
37}
38
39function PreviewCardPositioner({
40  ...props
41}: React.ComponentProps<typeof BasePreviewCard.Positioner>) {
42  return (
43    <BasePreviewCard.Positioner
44      data-slot="preview-card-positioner"
45      {...props}
46    />
47  );
48}
49
50function PreviewCardArrow({
51  ...props
52}: React.ComponentProps<typeof BasePreviewCard.Arrow>) {
53  return <BasePreviewCard.Arrow data-slot="preview-card-arrow" {...props} />;
54}
55
56function PreviewCardContent({
57  className,
58  children,
59  align = "center",
60  sideOffset = 8,
61  arrow = true,
62  level = 3,
63  shadowLevel = 3,
64  ...props
65}: React.ComponentProps<typeof BasePreviewCard.Popup> & {
66  align?: BasePreviewCard.Positioner.Props["align"];
67  sideOffset?: BasePreviewCard.Positioner.Props["sideOffset"];
68  arrow?: boolean;
69  level?: SurfaceLevel;
70  shadowLevel?: SurfaceLevel;
71}) {
72  return (
73    <PreviewCardPortal>
74      <PreviewCardPositioner sideOffset={sideOffset} align={align}>
75        <BasePreviewCard.Popup
76          data-slot="preview-card-content"
77          data-level={level}
78          className={cn(
79            "text-popover-foreground z-50 w-64 origin-[var(--transform-origin)] rounded-md p-3 transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
80            solidSurface(level, shadowLevel),
81            className,
82          )}
83          {...props}
84        >
85          {arrow && (
86// … truncated