@dalexto/lexsys-registry 0.0.2

package/templates/primitives/NumberField/NumberField.variants.ts

@@ -0,0 +1,92 @@
+/**
+ * NumberField.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const numberFieldVariants = cva(
+  "grid gap-(--lsys-number-field-gap) text-(--lsys-number-field-foreground) data-[disabled]:opacity-(--lsys-opacity-disabled)",
+)
+
+export const numberFieldGroupVariants = cva(
+  [
+    "inline-flex w-full min-w-0 items-stretch overflow-hidden rounded-(--lsys-number-field-radius)",
+    "border border-(--lsys-number-field-border-color) bg-(--lsys-number-field-background)",
+    "transition-colors duration-(--lsys-number-field-transition-duration) ease-(--lsys-number-field-transition-easing)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "h-(--lsys-number-field-height-sm)",
+        md: "h-(--lsys-number-field-height-md)",
+        lg: "h-(--lsys-number-field-height-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const numberFieldInputVariants = cva(
+  [
+    "min-w-0 flex-1 border-0 bg-transparent text-(--lsys-number-field-input-foreground)",
+    "font-(family-name:--lsys-number-field-input-font-family) font-(--lsys-number-field-input-font-weight) leading-(--lsys-number-field-input-font-line-height) tracking-(--lsys-number-field-input-font-letter-spacing)",
+    "placeholder:text-(--lsys-number-field-input-placeholder-color)",
+    "outline-none focus-visible:ring-(length:--lsys-number-field-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-number-field-focus-ring-color)",
+    "aria-invalid:ring-(length:--lsys-number-field-invalid-ring-width) aria-invalid:ring-inset aria-invalid:ring-(--lsys-number-field-invalid-ring-color) data-[invalid]:ring-(length:--lsys-number-field-invalid-ring-width) data-[invalid]:ring-inset data-[invalid]:ring-(--lsys-number-field-invalid-ring-color)",
+    "disabled:cursor-not-allowed data-[disabled]:cursor-not-allowed",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "px-(--lsys-number-field-input-padding-x-sm) text-(length:--lsys-number-field-input-font-size-sm)",
+        md: "px-(--lsys-number-field-input-padding-x-md) text-(length:--lsys-number-field-input-font-size-md)",
+        lg: "px-(--lsys-number-field-input-padding-x-lg) text-(length:--lsys-number-field-input-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const numberFieldButtonVariants = cva(
+  [
+    "inline-flex shrink-0 select-none items-center justify-center border-(--lsys-number-field-stepper-border-color)",
+    "bg-(--lsys-number-field-stepper-background) text-(--lsys-number-field-stepper-foreground)",
+    "font-(--lsys-number-field-stepper-font-weight) transition-colors duration-(--lsys-number-field-transition-duration) ease-(--lsys-number-field-transition-easing)",
+    "hover:bg-(--lsys-number-field-stepper-hover-background) focus-visible:outline-none focus-visible:ring-(length:--lsys-number-field-focus-ring-width) focus-visible:ring-inset focus-visible:ring-(--lsys-number-field-focus-ring-color)",
+    "disabled:cursor-not-allowed",
+    disabledStateClasses,
+  ].join(" "),
+  {
+    variants: {
+      position: {
+        decrement: "border-r",
+        increment: "border-l",
+      },
+      size: {
+        sm: "w-(--lsys-number-field-stepper-width-sm) text-(length:--lsys-number-field-stepper-font-size-sm)",
+        md: "w-(--lsys-number-field-stepper-width-md) text-(length:--lsys-number-field-stepper-font-size-md)",
+        lg: "w-(--lsys-number-field-stepper-width-lg) text-(length:--lsys-number-field-stepper-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      position: "increment",
+      size: "md",
+    },
+  },
+)
+
+export const numberFieldScrubAreaVariants = cva(
+  "w-fit cursor-ew-resize text-(length:--lsys-number-field-scrub-font-size) font-(--lsys-number-field-scrub-font-weight) text-(--lsys-number-field-scrub-foreground)",
+)
+
+export const numberFieldScrubAreaCursorVariants = cva(
+  "size-(--lsys-number-field-scrub-cursor-size) rounded-(--lsys-number-field-scrub-cursor-radius) bg-(--lsys-number-field-scrub-cursor-background)",
+)

package/templates/primitives/OtpField/OtpField.tsx

@@ -0,0 +1,65 @@
+/**
+ * OtpField.tsx
+ *
+ * Reference OtpField component implementation.
+ */
+
+import { OTPFieldPreview as BaseOtpField } from "@base-ui/react/otp-field"
+import type {
+  OtpFieldInputProps,
+  OtpFieldProps,
+  OtpFieldSeparatorProps,
+} from "./OtpField.types"
+import {
+  otpFieldInputVariants,
+  otpFieldSeparatorVariants,
+  otpFieldVariants,
+} from "./OtpField.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const OtpField = ({ ref, className, ...props }: OtpFieldProps) => {
+  return (
+    <BaseOtpField.Root
+      ref={ref}
+      className={mergeClassName(otpFieldVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+OtpField.displayName = "OtpField"
+
+const OtpFieldInput = ({
+  ref,
+  size,
+  className,
+  ...props
+}: OtpFieldInputProps) => {
+  return (
+    <BaseOtpField.Input
+      ref={ref}
+      className={mergeClassName(otpFieldInputVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+OtpFieldInput.displayName = "OtpFieldInput"
+
+const OtpFieldSeparator = ({
+  ref,
+  className,
+  ...props
+}: OtpFieldSeparatorProps) => {
+  return (
+    <BaseOtpField.Separator
+      ref={ref}
+      className={mergeClassName(otpFieldSeparatorVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+OtpFieldSeparator.displayName = "OtpFieldSeparator"
+
+export { OtpField, OtpFieldInput, OtpFieldSeparator }

package/templates/primitives/OtpField/OtpField.types.ts

@@ -0,0 +1,29 @@
+import type { Ref } from "react"
+/**
+ * OtpField.types.ts
+ *
+ * Public and internal types for OtpField component.
+ */
+
+import type { OTPFieldPreview as BaseOtpField } from "@base-ui/react/otp-field"
+
+export type OtpFieldSize = "sm" | "md" | "lg"
+
+export interface OtpFieldProps extends Omit<
+  BaseOtpField.Root.Props,
+  "className"
+> {
+  ref?: Ref<HTMLDivElement>
+  className?: BaseOtpField.Root.Props["className"]
+}
+
+export interface OtpFieldInputProps extends Omit<
+  BaseOtpField.Input.Props,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLInputElement>
+  size?: OtpFieldSize
+  className?: BaseOtpField.Input.Props["className"]
+}
+
+export type OtpFieldSeparatorProps = BaseOtpField.Separator.Props

package/templates/primitives/OtpField/OtpField.variants.ts

@@ -0,0 +1,45 @@
+/**
+ * OtpField.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses, invalidStateClasses } from "@/lib/utils"
+
+export const otpFieldVariants = cva(
+  [
+    "inline-flex items-center gap-(--lsys-input-padding-x-sm) text-(--lsys-field-foreground)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const otpFieldInputVariants = cva(
+  [
+    "flex shrink-0 items-center justify-center border bg-(--lsys-input-background) text-center text-(--lsys-input-foreground)",
+    "rounded-(--lsys-input-radius) border-(--lsys-input-border-color)",
+    "font-(family-name:--lsys-input-font-family) font-(--lsys-input-font-weight) leading-(--lsys-input-font-line-height) tracking-(--lsys-input-font-letter-spacing)",
+    "transition-colors duration-(--lsys-input-transition-duration) ease-(--lsys-input-transition-easing)",
+    "outline-none focus-visible:border-(--lsys-input-focus-border-color) focus-visible:ring-(length:--lsys-input-focus-ring-width) focus-visible:ring-(--lsys-input-focus-ring-color) focus-visible:ring-offset-(length:--lsys-input-focus-ring-offset) focus-visible:ring-offset-(--lsys-input-focus-ring-offset-color)",
+    "data-[filled]:border-(--lsys-input-focus-border-color)",
+    "disabled:cursor-not-allowed",
+    disabledStateClasses,
+    invalidStateClasses,
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "size-(--lsys-input-height-sm) text-(length:--lsys-input-font-size-sm)",
+        md: "size-(--lsys-input-height-md) text-(length:--lsys-input-font-size-md)",
+        lg: "size-(--lsys-input-height-lg) text-(length:--lsys-input-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const otpFieldSeparatorVariants = cva(
+  "select-none text-(length:--lsys-input-font-size-md) font-(--lsys-input-font-weight) text-(--lsys-input-placeholder-color)",
+)

package/templates/primitives/Popover/Popover.tsx

@@ -0,0 +1,193 @@
+/**
+ * Popover.tsx
+ *
+ * Reference Popover component implementation.
+ */
+
+import { X } from "lucide-react"
+import { Popover as BasePopover } from "@base-ui/react/popover"
+import type {
+  PopoverArrowProps,
+  PopoverBackdropProps,
+  PopoverCloseProps,
+  PopoverDescriptionProps,
+  PopoverPopupProps,
+  PopoverPortalProps,
+  PopoverPositionerProps,
+  PopoverProps,
+  PopoverTitleProps,
+  PopoverTriggerProps,
+  PopoverViewportProps,
+} from "./Popover.types"
+import {
+  popoverArrowVariants,
+  popoverBackdropVariants,
+  popoverCloseVariants,
+  popoverDescriptionVariants,
+  popoverPopupVariants,
+  popoverPositionerVariants,
+  popoverTitleVariants,
+  popoverTriggerVariants,
+  popoverViewportVariants,
+} from "./Popover.variants"
+import { mergeClassName } from "@/lib/utils"
+import { overlayPositionerSideOffset } from "@/lib/utils"
+
+const Popover = <Payload = unknown,>(props: PopoverProps<Payload>) => {
+  return <BasePopover.Root {...props} />
+}
+
+Popover.displayName = "Popover"
+
+const PopoverTrigger = ({ ref, className, ...props }: PopoverTriggerProps) => {
+  return (
+    <BasePopover.Trigger
+      ref={ref}
+      className={mergeClassName(popoverTriggerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PopoverTrigger.displayName = "PopoverTrigger"
+
+const PopoverPortal = ({ ref, ...props }: PopoverPortalProps) => {
+  return <BasePopover.Portal ref={ref} {...props} />
+}
+
+PopoverPortal.displayName = "PopoverPortal"
+
+const PopoverBackdrop = ({
+  ref,
+  className,
+  ...props
+}: PopoverBackdropProps) => {
+  return (
+    <BasePopover.Backdrop
+      ref={ref}
+      className={mergeClassName(popoverBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PopoverBackdrop.displayName = "PopoverBackdrop"
+
+const PopoverPositioner = ({
+  ref,
+  className,
+  sideOffset = overlayPositionerSideOffset,
+  ...props
+}: PopoverPositionerProps) => {
+  return (
+    <BasePopover.Positioner
+      ref={ref}
+      sideOffset={sideOffset}
+      className={mergeClassName(popoverPositionerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PopoverPositioner.displayName = "PopoverPositioner"
+
+const PopoverPopup = ({ ref, className, ...props }: PopoverPopupProps) => {
+  return (
+    <BasePopover.Popup
+      ref={ref}
+      className={mergeClassName(popoverPopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PopoverPopup.displayName = "PopoverPopup"
+
+const PopoverArrow = ({ ref, className, ...props }: PopoverArrowProps) => {
+  return (
+    <BasePopover.Arrow
+      ref={ref}
+      className={mergeClassName(popoverArrowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PopoverArrow.displayName = "PopoverArrow"
+
+const PopoverTitle = ({ ref, className, ...props }: PopoverTitleProps) => {
+  return (
+    <BasePopover.Title
+      ref={ref}
+      className={mergeClassName(popoverTitleVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PopoverTitle.displayName = "PopoverTitle"
+
+const PopoverDescription = ({
+  ref,
+  className,
+  ...props
+}: PopoverDescriptionProps) => {
+  return (
+    <BasePopover.Description
+      ref={ref}
+      className={mergeClassName(popoverDescriptionVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PopoverDescription.displayName = "PopoverDescription"
+
+const PopoverClose = ({
+  ref,
+  className,
+  children,
+  ...props
+}: PopoverCloseProps) => {
+  return (
+    <BasePopover.Close
+      ref={ref}
+      className={mergeClassName(popoverCloseVariants(), className)}
+      {...props}
+    >
+      {children ?? <X aria-hidden="true" size={16} />}
+    </BasePopover.Close>
+  )
+}
+
+PopoverClose.displayName = "PopoverClose"
+
+const PopoverViewport = ({
+  ref,
+  className,
+  ...props
+}: PopoverViewportProps) => {
+  return (
+    <BasePopover.Viewport
+      ref={ref}
+      className={mergeClassName(popoverViewportVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PopoverViewport.displayName = "PopoverViewport"
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverPortal,
+  PopoverBackdrop,
+  PopoverPositioner,
+  PopoverPopup,
+  PopoverArrow,
+  PopoverTitle,
+  PopoverDescription,
+  PopoverClose,
+  PopoverViewport,
+}

package/templates/primitives/Popover/Popover.types.ts

@@ -0,0 +1,35 @@
+import type { Ref } from "react"
+/**
+ * Popover.types.ts
+ *
+ * Public and internal types for Popover component.
+ */
+
+import type { Popover as BasePopover } from "@base-ui/react/popover"
+
+export type PopoverProps<Payload = unknown> = BasePopover.Root.Props<Payload>
+
+export type PopoverTriggerProps<Payload = unknown> =
+  BasePopover.Trigger.Props<Payload> & {
+    ref?: Ref<HTMLButtonElement>
+  }
+
+export type PopoverPortalProps = BasePopover.Portal.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type PopoverBackdropProps = BasePopover.Backdrop.Props
+
+export type PopoverPositionerProps = BasePopover.Positioner.Props
+
+export type PopoverPopupProps = BasePopover.Popup.Props
+
+export type PopoverArrowProps = BasePopover.Arrow.Props
+
+export type PopoverTitleProps = BasePopover.Title.Props
+
+export type PopoverDescriptionProps = BasePopover.Description.Props
+
+export type PopoverCloseProps = BasePopover.Close.Props
+
+export type PopoverViewportProps = BasePopover.Viewport.Props

package/templates/primitives/Popover/Popover.variants.ts

@@ -0,0 +1,68 @@
+/**
+ * Popover.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const popoverTriggerVariants = cva(
+  [
+    "inline-flex h-(--lsys-popover-trigger-height) items-center justify-center rounded-(--lsys-popover-trigger-radius)",
+    "border border-(--lsys-popover-trigger-border-color) bg-(--lsys-popover-trigger-background) px-(--lsys-popover-trigger-padding-x) text-(--lsys-popover-trigger-foreground)",
+    "text-(length:--lsys-popover-trigger-font-size) font-(--lsys-popover-trigger-font-weight) leading-(--lsys-popover-trigger-font-line-height)",
+    "transition-colors duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
+    "outline-none hover:bg-(--lsys-popover-trigger-hover-background) focus-visible:ring-(length:--lsys-popover-focus-ring-width) focus-visible:ring-(--lsys-popover-focus-ring-color) focus-visible:ring-offset-(length:--lsys-popover-focus-ring-offset) focus-visible:ring-offset-(--lsys-popover-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const popoverBackdropVariants = cva(
+  [
+    "fixed inset-0 z-(--lsys-popover-backdrop-z-index) bg-(--lsys-popover-backdrop-background) opacity-(--lsys-popover-backdrop-opacity)",
+    "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+    "transition-opacity duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
+  ].join(" "),
+)
+
+export const popoverPositionerVariants = cva(
+  "z-(--lsys-popover-positioner-z-index) outline-none data-[anchor-hidden]:hidden",
+)
+
+export const popoverPopupVariants = cva(
+  [
+    "grid w-[min(calc(100vw-(var(--lsys-popover-popup-inset)*2)),var(--lsys-popover-popup-max-width))] gap-(--lsys-popover-popup-gap) rounded-(--lsys-popover-popup-radius) border",
+    "border-(--lsys-popover-popup-border-color) bg-(--lsys-popover-popup-background) p-(--lsys-popover-popup-padding) text-(--lsys-popover-popup-foreground) shadow-(--lsys-popover-popup-shadow)",
+    "outline-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "transition-[opacity,transform] duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
+  ].join(" "),
+)
+
+export const popoverArrowVariants = cva(
+  [
+    "size-(--lsys-popover-arrow-size) rotate-45 border border-(--lsys-popover-popup-border-color) bg-(--lsys-popover-popup-background)",
+    "data-[side=bottom]:-translate-y-1/2 data-[side=left]:translate-x-1/2 data-[side=right]:-translate-x-1/2 data-[side=top]:translate-y-1/2",
+  ].join(" "),
+)
+
+export const popoverTitleVariants = cva(
+  "pr-(--lsys-popover-title-padding-end) text-(length:--lsys-popover-title-font-size) font-(--lsys-popover-title-font-weight) leading-(--lsys-popover-title-font-line-height) text-(--lsys-popover-title-foreground)",
+)
+
+export const popoverDescriptionVariants = cva(
+  "text-(length:--lsys-popover-description-font-size) font-(--lsys-popover-description-font-weight) leading-(--lsys-popover-description-font-line-height) text-(--lsys-popover-description-foreground)",
+)
+
+export const popoverCloseVariants = cva(
+  [
+    "absolute right-(--lsys-popover-close-inset) top-(--lsys-popover-close-inset) inline-flex size-(--lsys-popover-close-size) items-center justify-center rounded-(--lsys-popover-close-radius)",
+    "text-(--lsys-popover-close-foreground) outline-none transition-colors duration-(--lsys-popover-transition-duration) ease-(--lsys-popover-transition-easing)",
+    "hover:bg-(--lsys-popover-close-hover-background) focus-visible:ring-(length:--lsys-popover-focus-ring-width) focus-visible:ring-(--lsys-popover-focus-ring-color) focus-visible:ring-offset-(length:--lsys-popover-focus-ring-offset) focus-visible:ring-offset-(--lsys-popover-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const popoverViewportVariants = cva(
+  "grid gap-(--lsys-popover-popup-gap)",
+)

package/templates/primitives/PreviewCard/PreviewCard.tsx

@@ -0,0 +1,153 @@
+/**
+ * PreviewCard.tsx
+ *
+ * Reference PreviewCard component implementation.
+ */
+
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card"
+import type {
+  PreviewCardArrowProps,
+  PreviewCardBackdropProps,
+  PreviewCardPopupProps,
+  PreviewCardPortalProps,
+  PreviewCardPositionerProps,
+  PreviewCardProps,
+  PreviewCardTriggerProps,
+  PreviewCardViewportProps,
+} from "./PreviewCard.types"
+import {
+  previewCardArrowVariants,
+  previewCardBackdropVariants,
+  previewCardPopupVariants,
+  previewCardPositionerVariants,
+  previewCardTriggerVariants,
+  previewCardViewportVariants,
+} from "./PreviewCard.variants"
+import { mergeClassName } from "@/lib/utils"
+import { overlayPositionerSideOffset } from "@/lib/utils"
+
+const PreviewCard = <Payload = unknown,>(props: PreviewCardProps<Payload>) => {
+  return <BasePreviewCard.Root {...props} />
+}
+
+PreviewCard.displayName = "PreviewCard"
+
+const PreviewCardTrigger = <Payload = unknown,>({
+  ref,
+  className,
+  ...props
+}: PreviewCardTriggerProps<Payload>) => {
+  return (
+    <BasePreviewCard.Trigger
+      ref={ref}
+      className={mergeClassName(previewCardTriggerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PreviewCardTrigger.displayName = "PreviewCardTrigger"
+
+const PreviewCardPortal = (props: PreviewCardPortalProps) => {
+  return <BasePreviewCard.Portal {...props} />
+}
+
+PreviewCardPortal.displayName = "PreviewCardPortal"
+
+const PreviewCardPositioner = ({
+  ref,
+  className,
+  sideOffset = overlayPositionerSideOffset,
+  ...props
+}: PreviewCardPositionerProps) => {
+  return (
+    <BasePreviewCard.Positioner
+      ref={ref}
+      sideOffset={sideOffset}
+      className={mergeClassName(previewCardPositionerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PreviewCardPositioner.displayName = "PreviewCardPositioner"
+
+const PreviewCardPopup = ({
+  ref,
+  className,
+  ...props
+}: PreviewCardPopupProps) => {
+  return (
+    <BasePreviewCard.Popup
+      ref={ref}
+      className={mergeClassName(previewCardPopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PreviewCardPopup.displayName = "PreviewCardPopup"
+
+const PreviewCardArrow = ({
+  ref,
+  className,
+  ...props
+}: PreviewCardArrowProps) => {
+  return (
+    <BasePreviewCard.Arrow
+      ref={ref}
+      className={mergeClassName(previewCardArrowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PreviewCardArrow.displayName = "PreviewCardArrow"
+
+const PreviewCardBackdrop = ({
+  ref,
+  className,
+  ...props
+}: PreviewCardBackdropProps) => {
+  return (
+    <BasePreviewCard.Backdrop
+      ref={ref}
+      className={mergeClassName(previewCardBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PreviewCardBackdrop.displayName = "PreviewCardBackdrop"
+
+const PreviewCardViewport = ({
+  ref,
+  className,
+  ...props
+}: PreviewCardViewportProps) => {
+  return (
+    <BasePreviewCard.Viewport
+      ref={ref}
+      className={mergeClassName(previewCardViewportVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+PreviewCardViewport.displayName = "PreviewCardViewport"
+
+const createPreviewCardHandle = BasePreviewCard.createHandle
+
+export {
+  PreviewCard,
+  PreviewCardTrigger,
+  PreviewCardPortal,
+  PreviewCardPositioner,
+  PreviewCardPopup,
+  PreviewCardArrow,
+  PreviewCardBackdrop,
+  PreviewCardViewport,
+  createPreviewCardHandle,
+}
+
+export type { PreviewCardHandle } from "./PreviewCard.types"