{"name":"preview-card","type":"registry:ui","files":[{"path":"preview-card.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst PreviewCard = PreviewCardPrimitive.Root\n\nfunction PreviewCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"preview-card-trigger\" {...props} />\n  )\n}\n\nfunction PreviewCardPopup({\n  className,\n  children,\n  align = \"center\",\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props & {\n  align?: PreviewCardPrimitive.Positioner.Props[\"align\"]\n  side?: PreviewCardPrimitive.Positioner.Props[\"side\"]\n  sideOffset?: PreviewCardPrimitive.Positioner.Props[\"sideOffset\"]\n}) {\n  return (\n    <PreviewCardPrimitive.Portal>\n      <PreviewCardPrimitive.Positioner\n        data-slot=\"preview-card-positioner\"\n        className=\"z-[var(--hui-z-index-portal)] h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) [--animation-duration:var(--hui-duration-moderate)] [--easing:var(--hui-ease-out)] [transition:opacity_var(--animation-duration)_var(--easing)] motion-safe:has-[[data-slot=preview-card-viewport]]:[transition:top_var(--animation-duration)_var(--easing),left_var(--animation-duration)_var(--easing),right_var(--animation-duration)_var(--easing),bottom_var(--animation-duration)_var(--easing),opacity_var(--animation-duration)_var(--easing)]\"\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"preview-card-content\"\n          className={cn(\n            \"relative box-border h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-(--transform-origin) rounded-[var(--hui-radius-2)] border-[0.5px] border-[var(--hui-color-border-base-primary)] bg-[var(--hui-color-background-base-primary)] p-[var(--hui-space-3)] text-[var(--hui-color-foreground-base-primary)] shadow-[var(--hui-shadow-soft)] [transition:opacity_var(--animation-duration)_var(--easing)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-safe:[transition:opacity_var(--animation-duration)_var(--easing),transform_var(--animation-duration)_var(--easing)] motion-safe:data-ending-style:scale-90 motion-safe:data-starting-style:scale-90 motion-safe:has-[[data-slot=preview-card-viewport]]:[transition:width_var(--animation-duration)_var(--easing),height_var(--animation-duration)_var(--easing),opacity_var(--animation-duration)_var(--easing),transform_var(--animation-duration)_var(--easing)]\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </PreviewCardPrimitive.Popup>\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nfunction PreviewCardArrow({\n  className,\n  ...props\n}: PreviewCardPrimitive.Arrow.Props) {\n  return (\n    <PreviewCardPrimitive.Arrow\n      data-slot=\"preview-card-arrow\"\n      className={cn(\n        \"z-[var(--hui-z-index-portal)] [filter:drop-shadow(0_1px_0_var(--hui-color-border-base-primary))_drop-shadow(0_1px_1px_var(--hui-color-border-base-primary))] data-[side=top]:bottom-[-7px] data-[side=bottom]:top-0 data-[side=bottom]:-translate-y-full data-[side=bottom]:rotate-180 data-[side=left]:right-0 data-[side=left]:translate-x-full data-[side=left]:-translate-y-1/2 data-[side=left]:-rotate-90 data-[side=inline-start]:right-0 data-[side=inline-start]:translate-x-full data-[side=inline-start]:-translate-y-1/2 data-[side=inline-start]:-rotate-90 data-[side=right]:left-0 data-[side=right]:-translate-x-full data-[side=right]:-translate-y-1/2 data-[side=right]:rotate-90 data-[side=inline-end]:left-0 data-[side=inline-end]:-translate-x-full data-[side=inline-end]:-translate-y-1/2 data-[side=inline-end]:rotate-90 [&_svg]:text-[var(--hui-color-background-base-primary)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PreviewCardViewport({\n  className,\n  ...props\n}: PreviewCardPrimitive.Viewport.Props) {\n  return (\n    <PreviewCardPrimitive.Viewport\n      data-slot=\"preview-card-viewport\"\n      className={cn(\n        \"relative h-full w-full overflow-clip [&_[data-current]]:w-(--popup-width) [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:[transition:opacity_calc(var(--animation-duration)/2)_var(--easing)] [&_[data-previous]]:w-(--popup-width) [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:[transition:opacity_calc(var(--animation-duration)/2)_var(--easing)] data-[activation-direction~=left]:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~=left]:[&_[data-previous][data-ending-style]]:opacity-0 data-[activation-direction~=right]:[&_[data-current][data-starting-style]]:opacity-0 data-[activation-direction~=right]:[&_[data-previous][data-ending-style]]:opacity-0 motion-safe:[&_[data-current]]:[transition:translate_var(--animation-duration)_var(--easing),opacity_calc(var(--animation-duration)/2)_var(--easing)] motion-safe:[&_[data-previous]]:[transition:translate_var(--animation-duration)_var(--easing),opacity_calc(var(--animation-duration)/2)_var(--easing)] motion-safe:data-[activation-direction~=left]:[&_[data-current][data-starting-style]]:[translate:-30%_0] motion-safe:data-[activation-direction~=left]:[&_[data-previous][data-ending-style]]:[translate:30%_0] motion-safe:data-[activation-direction~=right]:[&_[data-current][data-starting-style]]:[translate:30%_0] motion-safe:data-[activation-direction~=right]:[&_[data-previous][data-ending-style]]:[translate:-30%_0]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  PreviewCard,\n  PreviewCard as HoverCard,\n  PreviewCardTrigger,\n  PreviewCardTrigger as HoverCardTrigger,\n  PreviewCardPopup,\n  PreviewCardPopup as HoverCardContent,\n  PreviewCardArrow,\n  PreviewCardArrow as HoverCardArrow,\n  PreviewCardViewport,\n  PreviewCardViewport as HoverCardViewport,\n}\n","target":"components/ui/preview-card.tsx"}],"dependencies":["@base-ui/react"]}