@boyernick/standard-ui-react 0.1.0

package/src/navigation-menu.tsx

@@ -0,0 +1,217 @@
+"use client"
+
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu"
+import type { ComponentProps } from "react"
+import { IconChevronDownSmall } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type NavigationMenuProps = ComponentProps<typeof BaseNavigationMenu.Root>
+export type NavigationMenuListProps = ComponentProps<
+  typeof BaseNavigationMenu.List
+>
+export type NavigationMenuItemProps = ComponentProps<
+  typeof BaseNavigationMenu.Item
+>
+export type NavigationMenuTriggerProps = ComponentProps<
+  typeof BaseNavigationMenu.Trigger
+>
+export type NavigationMenuContentProps = ComponentProps<
+  typeof BaseNavigationMenu.Content
+>
+export type NavigationMenuPortalProps = ComponentProps<
+  typeof BaseNavigationMenu.Portal
+>
+export type NavigationMenuPositionerProps = ComponentProps<
+  typeof BaseNavigationMenu.Positioner
+>
+export type NavigationMenuViewportProps = ComponentProps<
+  typeof BaseNavigationMenu.Viewport
+>
+export type NavigationMenuBackdropProps = ComponentProps<
+  typeof BaseNavigationMenu.Backdrop
+>
+export type NavigationMenuPopupProps = ComponentProps<
+  typeof BaseNavigationMenu.Popup
+>
+export type NavigationMenuArrowProps = ComponentProps<
+  typeof BaseNavigationMenu.Arrow
+>
+export type NavigationMenuLinkProps = ComponentProps<
+  typeof BaseNavigationMenu.Link
+>
+export type NavigationMenuIconProps = ComponentProps<
+  typeof BaseNavigationMenu.Icon
+>
+
+const navigationMenuTriggerClassName = cn(
+  "inline-flex h-9 cursor-pointer items-center gap-1 rounded-md px-3 text-sm text-fg-secondary outline-none",
+  motion.colors,
+  "hover:bg-background-tertiary hover:text-fg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-popup-open:bg-background-tertiary data-popup-open:text-fg-primary",
+)
+
+export const NavigationMenu = ({
+  className,
+  ...props
+}: NavigationMenuProps) => (
+  <BaseNavigationMenu.Root
+    className={cn("relative isolate z-10 flex max-w-max flex-1 items-center justify-center", className)}
+    {...props}
+  />
+)
+
+export const NavigationMenuList = ({
+  className,
+  ...props
+}: NavigationMenuListProps) => (
+  <BaseNavigationMenu.List
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center gap-0.5",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const NavigationMenuItem = ({
+  className,
+  ...props
+}: NavigationMenuItemProps) => (
+  <BaseNavigationMenu.Item className={cn(className)} {...props} />
+)
+
+export const NavigationMenuTrigger = ({
+  className,
+  children,
+  ...props
+}: NavigationMenuTriggerProps) => (
+  <BaseNavigationMenu.Trigger
+    className={cn(navigationMenuTriggerClassName, className)}
+    {...props}
+  >
+    {children}
+    <NavigationMenuIcon />
+  </BaseNavigationMenu.Trigger>
+)
+
+export const NavigationMenuIcon = ({
+  className,
+  children,
+  ...props
+}: NavigationMenuIconProps) => (
+  <BaseNavigationMenu.Icon
+    className={cn(
+      "inline-flex text-fg-tertiary transition-transform duration-150 ease-out motion-reduce:transition-none data-popup-open:rotate-180",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? (
+      <IconChevronDownSmall size={14} className="size-3.5" aria-hidden />
+    )}
+  </BaseNavigationMenu.Icon>
+)
+
+export const NavigationMenuContent = ({
+  className,
+  ...props
+}: NavigationMenuContentProps) => (
+  <BaseNavigationMenu.Content
+    className={cn(
+      "w-auto p-2 data-ending-style:opacity-0 data-starting-style:opacity-0",
+      motion.colors,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const NavigationMenuLink = ({
+  className,
+  ...props
+}: NavigationMenuLinkProps) => (
+  <BaseNavigationMenu.Link
+    className={cn(
+      "flex cursor-pointer flex-col gap-0.5 rounded-md p-2.5 text-sm text-fg-primary outline-none",
+      motion.colors,
+      "hover:bg-background-tertiary focus-visible:bg-background-tertiary focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-active:bg-background-tertiary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const NavigationMenuPortal = (props: NavigationMenuPortalProps) => (
+  <BaseNavigationMenu.Portal {...props} />
+)
+
+export const NavigationMenuBackdrop = ({
+  className,
+  ...props
+}: NavigationMenuBackdropProps) => (
+  <BaseNavigationMenu.Backdrop
+    className={cn(
+      "fixed inset-0 z-40 bg-transparent",
+      motion.backdrop,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const NavigationMenuPositioner = ({
+  sideOffset = 8,
+  className,
+  ...props
+}: NavigationMenuPositionerProps) => (
+  <BaseNavigationMenu.Positioner
+    sideOffset={sideOffset}
+    className={cn("z-50 outline-none", className)}
+    {...props}
+  />
+)
+
+export const NavigationMenuPopup = ({
+  className,
+  ...props
+}: NavigationMenuPopupProps) => (
+  <BaseNavigationMenu.Popup
+    className={cn(
+      "relative z-50 w-[var(--popup-width)] overflow-hidden rounded-xl border border-border-primary bg-surface shadow-md outline-none",
+      "h-[var(--popup-height)] transition-[width,height,opacity] duration-200 ease-out motion-reduce:transition-none",
+      "data-starting-style:opacity-0 data-ending-style:opacity-0",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const NavigationMenuViewport = ({
+  className,
+  ...props
+}: NavigationMenuViewportProps) => (
+  <BaseNavigationMenu.Viewport
+    className={cn("relative size-full overflow-hidden", className)}
+    {...props}
+  />
+)
+
+export const NavigationMenuArrow = ({
+  className,
+  ...props
+}: NavigationMenuArrowProps) => (
+  <BaseNavigationMenu.Arrow
+    className={cn(
+      "data-[side=bottom]:top-[-6px] data-[side=left]:right-[-6px] data-[side=right]:left-[-6px] data-[side=top]:bottom-[-6px]",
+      "size-2.5 rotate-45 border border-border-primary bg-surface",
+      "data-[side=bottom]:border-r-0 data-[side=bottom]:border-b-0",
+      "data-[side=top]:border-t-0 data-[side=top]:border-l-0",
+      "data-[side=left]:border-b-0 data-[side=left]:border-l-0",
+      "data-[side=right]:border-t-0 data-[side=right]:border-r-0",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export { navigationMenuTriggerClassName }

package/src/number-field.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field"
+import type { ComponentProps } from "react"
+import { IconMinus, IconPlus } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type NumberFieldProps = ComponentProps<typeof BaseNumberField.Root>
+export type NumberFieldGroupProps = ComponentProps<typeof BaseNumberField.Group>
+export type NumberFieldInputProps = ComponentProps<typeof BaseNumberField.Input>
+export type NumberFieldIncrementProps = ComponentProps<
+  typeof BaseNumberField.Increment
+>
+export type NumberFieldDecrementProps = ComponentProps<
+  typeof BaseNumberField.Decrement
+>
+export type NumberFieldScrubAreaProps = ComponentProps<
+  typeof BaseNumberField.ScrubArea
+>
+export type NumberFieldScrubAreaCursorProps = ComponentProps<
+  typeof BaseNumberField.ScrubAreaCursor
+>
+
+export const NumberField = ({ className, ...props }: NumberFieldProps) => (
+  <BaseNumberField.Root
+    className={cn("flex flex-col gap-1.5", className)}
+    {...props}
+  />
+)
+
+export const NumberFieldGroup = ({
+  className,
+  ...props
+}: NumberFieldGroupProps) => (
+  <BaseNumberField.Group
+    className={cn(
+      "flex h-9 w-full items-stretch overflow-hidden rounded-md border border-border-secondary bg-surface inset-shadow-outline-top outline-none transition-[color,box-shadow]",
+      "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-ring/20",
+      "aria-invalid:border-destructive aria-invalid:focus-within:border-destructive aria-invalid:focus-within:ring-destructive/20",
+      "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:border-destructive has-[[aria-invalid=true]]:focus-within:ring-destructive/20",
+      "has-[:disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const NumberFieldInput = ({
+  className,
+  ...props
+}: NumberFieldInputProps) => (
+  <BaseNumberField.Input
+    className={cn(
+      "h-full min-w-0 flex-1 cursor-text border-x border-border-primary bg-transparent px-2 text-center text-sm tabular-nums text-fg-primary outline-none focus-visible:outline-none",
+      className,
+    )}
+    {...props}
+  />
+)
+
+const stepperClassName = cn(
+  "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center text-fg-tertiary outline-none",
+  motion.colors,
+  "hover:bg-background-tertiary hover:text-fg-primary focus-visible:bg-background-tertiary focus-visible:text-fg-primary focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
+)
+
+export const NumberFieldDecrement = ({
+  className,
+  children,
+  "aria-label": ariaLabel = "Decrease",
+  ...props
+}: NumberFieldDecrementProps) => (
+  <BaseNumberField.Decrement
+    aria-label={ariaLabel}
+    className={cn(stepperClassName, className)}
+    {...props}
+  >
+    {children ?? <IconMinus size={16} className="size-4" aria-hidden />}
+  </BaseNumberField.Decrement>
+)
+
+export const NumberFieldIncrement = ({
+  className,
+  children,
+  "aria-label": ariaLabel = "Increase",
+  ...props
+}: NumberFieldIncrementProps) => (
+  <BaseNumberField.Increment
+    aria-label={ariaLabel}
+    className={cn(stepperClassName, className)}
+    {...props}
+  >
+    {children ?? <IconPlus size={16} className="size-4" aria-hidden />}
+  </BaseNumberField.Increment>
+)
+
+export const NumberFieldScrubArea = ({
+  className,
+  ...props
+}: NumberFieldScrubAreaProps) => (
+  <BaseNumberField.ScrubArea
+    className={cn(
+      "inline-flex cursor-ew-resize items-center gap-1 text-sm text-fg-secondary select-none",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const NumberFieldScrubAreaCursor = ({
+  className,
+  ...props
+}: NumberFieldScrubAreaCursorProps) => (
+  <BaseNumberField.ScrubAreaCursor
+    className={cn(className)}
+    {...props}
+  />
+)

package/src/orb.tsx

@@ -0,0 +1,33 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+import { cn } from "./lib/cn";
+
+const orbVariants = cva(
+  "relative inline-flex shrink-0 animate-pulse rounded-full border border-brand-primary-border bg-brand-primary after:absolute after:inset-1/4 after:rounded-full after:bg-surface/70 after:blur-sm motion-reduce:animate-none",
+  {
+    variants: {
+      size: {
+        sm: "size-6",
+        md: "size-10",
+        lg: "size-16",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+export type OrbProps = ComponentProps<"span"> &
+  VariantProps<typeof orbVariants>;
+
+export const Orb = ({ className, size, ...props }: OrbProps) => (
+  <span
+    role="status"
+    aria-label="Loading"
+    className={cn(orbVariants({ size }), className)}
+    {...props}
+  />
+);
+
+export { orbVariants };

package/src/otp-field.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { OTPField as BaseOTPField } from "@base-ui/react/otp-field"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type OTPFieldProps = ComponentProps<typeof BaseOTPField.Root>
+export type OTPFieldInputProps = ComponentProps<typeof BaseOTPField.Input>
+export type OTPFieldSeparatorProps = ComponentProps<typeof BaseOTPField.Separator>
+
+export const OTPField = ({ className, ...props }: OTPFieldProps) => (
+  <BaseOTPField.Root
+    className={cn("flex items-center gap-2", className)}
+    {...props}
+  />
+)
+
+export const OTPFieldInput = ({ className, ...props }: OTPFieldInputProps) => (
+  <BaseOTPField.Input
+    className={cn(
+      "size-10 rounded-md border border-border-secondary bg-surface text-center text-sm tabular-nums text-fg-primary inset-shadow-outline-top outline-none",
+      motion.colors,
+      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+      "aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20",
+      "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      "data-filled:border-border-secondary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const OTPFieldSeparator = ({
+  className,
+  ...props
+}: OTPFieldSeparatorProps) => (
+  <BaseOTPField.Separator
+    className={cn(
+      "mx-0.5 h-px w-3 shrink-0 self-center bg-border-secondary",
+      className,
+    )}
+    {...props}
+  />
+)

package/src/pagination.tsx

@@ -0,0 +1,91 @@
+import type { ComponentProps } from "react";
+import { IconChevronRightSmall } from "./icons";
+import { cn } from "./lib/cn";
+import { motion } from "./lib/motion";
+
+export type PaginationProps = ComponentProps<"nav">;
+export type PaginationContentProps = ComponentProps<"ul">;
+export type PaginationItemProps = ComponentProps<"li">;
+export type PaginationLinkProps = ComponentProps<"button"> & {
+  active?: boolean;
+};
+export type PaginationPreviousProps = PaginationLinkProps;
+export type PaginationNextProps = PaginationLinkProps;
+export type PaginationEllipsisProps = ComponentProps<"span">;
+
+export const Pagination = ({ className, ...props }: PaginationProps) => (
+  <nav
+    aria-label="Pagination"
+    className={cn("flex w-full justify-center", className)}
+    {...props}
+  />
+);
+
+export const PaginationContent = ({
+  className,
+  ...props
+}: PaginationContentProps) => (
+  <ul className={cn("flex items-center gap-1", className)} {...props} />
+);
+
+export const PaginationItem = ({
+  className,
+  ...props
+}: PaginationItemProps) => <li className={cn("flex", className)} {...props} />;
+
+export const PaginationLink = ({
+  className,
+  active = false,
+  type = "button",
+  ...props
+}: PaginationLinkProps) => (
+  <button
+    type={type}
+    aria-current={active ? "page" : undefined}
+    data-active={active || undefined}
+    className={cn(
+      "inline-flex size-9 cursor-pointer items-center justify-center rounded-md border border-transparent text-sm text-fg-secondary outline-none hover:bg-background-tertiary hover:text-fg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 data-[active]:border-border-primary data-[active]:bg-surface data-[active]:text-fg-primary",
+      motion.colors,
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const PaginationPrevious = ({
+  children = "Previous",
+  className,
+  ...props
+}: PaginationPreviousProps) => (
+  <PaginationLink className={cn("w-auto gap-1 px-3", className)} {...props}>
+    <IconChevronRightSmall className="rotate-180" aria-hidden />
+    {children}
+  </PaginationLink>
+);
+
+export const PaginationNext = ({
+  children = "Next",
+  className,
+  ...props
+}: PaginationNextProps) => (
+  <PaginationLink className={cn("w-auto gap-1 px-3", className)} {...props}>
+    {children}
+    <IconChevronRightSmall aria-hidden />
+  </PaginationLink>
+);
+
+export const PaginationEllipsis = ({
+  className,
+  ...props
+}: PaginationEllipsisProps) => (
+  <span
+    aria-hidden
+    className={cn(
+      "flex size-9 items-center justify-center text-sm text-fg-tertiary",
+      className,
+    )}
+    {...props}
+  >
+    …
+  </span>
+);

package/src/popover.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import { Popover as BasePopover } from "@base-ui/react/popover"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type PopoverProps = ComponentProps<typeof BasePopover.Root>
+export type PopoverTriggerProps = ComponentProps<typeof BasePopover.Trigger>
+export type PopoverPortalProps = ComponentProps<typeof BasePopover.Portal>
+export type PopoverPositionerProps = ComponentProps<
+  typeof BasePopover.Positioner
+>
+export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup>
+export type PopoverTitleProps = ComponentProps<typeof BasePopover.Title>
+export type PopoverDescriptionProps = ComponentProps<
+  typeof BasePopover.Description
+>
+export type PopoverCloseProps = ComponentProps<typeof BasePopover.Close>
+export type PopoverArrowProps = ComponentProps<typeof BasePopover.Arrow>
+
+export const Popover = (props: PopoverProps) => <BasePopover.Root {...props} />
+
+export const PopoverTrigger = ({
+  className,
+  ...props
+}: PopoverTriggerProps) => (
+  <BasePopover.Trigger className={cn("cursor-pointer", className)} {...props} />
+)
+
+export const PopoverPortal = (props: PopoverPortalProps) => (
+  <BasePopover.Portal {...props} />
+)
+
+export const PopoverPositioner = ({
+  sideOffset = 4,
+  className,
+  ...props
+}: PopoverPositionerProps) => (
+  <BasePopover.Positioner
+    sideOffset={sideOffset}
+    className={cn("z-50 outline-none", className)}
+    {...props}
+  />
+)
+
+export const PopoverPopup = ({ className, ...props }: PopoverPopupProps) => (
+  <BasePopover.Popup
+    className={cn(
+      "z-50 flex w-72 flex-col gap-1 rounded-xl border border-border-primary bg-surface p-4 shadow-md outline-none",
+      motion.popupAnchor,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const PopoverTitle = ({ className, ...props }: PopoverTitleProps) => (
+  <BasePopover.Title
+    className={cn("text-sm-strong text-fg-primary", className)}
+    {...props}
+  />
+)
+
+export const PopoverDescription = ({
+  className,
+  ...props
+}: PopoverDescriptionProps) => (
+  <BasePopover.Description
+    className={cn("text-sm leading-relaxed text-fg-secondary", className)}
+    {...props}
+  />
+)
+
+export const PopoverClose = ({ className, ...props }: PopoverCloseProps) => (
+  <BasePopover.Close className={cn("cursor-pointer", className)} {...props} />
+)
+
+export const PopoverArrow = ({ className, ...props }: PopoverArrowProps) => (
+  <BasePopover.Arrow
+    className={cn(
+      "data-[side=bottom]:top-[-6px] data-[side=left]:right-[-6px] data-[side=right]:left-[-6px] data-[side=top]:bottom-[-6px]",
+      "size-2.5 rotate-45 border border-border-primary bg-surface",
+      "data-[side=bottom]:border-r-0 data-[side=bottom]:border-b-0",
+      "data-[side=top]:border-t-0 data-[side=top]:border-l-0",
+      "data-[side=left]:border-b-0 data-[side=left]:border-l-0",
+      "data-[side=right]:border-t-0 data-[side=right]:border-r-0",
+      className,
+    )}
+    {...props}
+  />
+)

package/src/preview-card.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type PreviewCardProps = ComponentProps<typeof BasePreviewCard.Root>
+export type PreviewCardTriggerProps = ComponentProps<
+  typeof BasePreviewCard.Trigger
+>
+export type PreviewCardPortalProps = ComponentProps<
+  typeof BasePreviewCard.Portal
+>
+export type PreviewCardBackdropProps = ComponentProps<
+  typeof BasePreviewCard.Backdrop
+>
+export type PreviewCardPositionerProps = ComponentProps<
+  typeof BasePreviewCard.Positioner
+>
+export type PreviewCardPopupProps = ComponentProps<typeof BasePreviewCard.Popup>
+export type PreviewCardArrowProps = ComponentProps<typeof BasePreviewCard.Arrow>
+export type PreviewCardViewportProps = ComponentProps<
+  typeof BasePreviewCard.Viewport
+>
+
+export const PreviewCard = (props: PreviewCardProps) => (
+  <BasePreviewCard.Root {...props} />
+)
+
+export const PreviewCardTrigger = ({
+  className,
+  ...props
+}: PreviewCardTriggerProps) => (
+  <BasePreviewCard.Trigger
+    className={cn("cursor-pointer", className)}
+    {...props}
+  />
+)
+
+export const PreviewCardPortal = (props: PreviewCardPortalProps) => (
+  <BasePreviewCard.Portal {...props} />
+)
+
+export const PreviewCardBackdrop = ({
+  className,
+  ...props
+}: PreviewCardBackdropProps) => (
+  <BasePreviewCard.Backdrop className={cn(className)} {...props} />
+)
+
+export const PreviewCardPositioner = ({
+  sideOffset = 8,
+  className,
+  ...props
+}: PreviewCardPositionerProps) => (
+  <BasePreviewCard.Positioner
+    sideOffset={sideOffset}
+    className={cn("z-50 outline-none", className)}
+    {...props}
+  />
+)
+
+export const PreviewCardPopup = ({
+  className,
+  ...props
+}: PreviewCardPopupProps) => (
+  <BasePreviewCard.Popup
+    className={cn(
+      "z-50 w-72 overflow-hidden rounded-xl border border-border-primary bg-surface p-4 shadow-md outline-none",
+      motion.popupAnchor,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const PreviewCardArrow = ({
+  className,
+  ...props
+}: PreviewCardArrowProps) => (
+  <BasePreviewCard.Arrow
+    className={cn(
+      "data-[side=bottom]:top-[-6px] data-[side=left]:right-[-6px] data-[side=right]:left-[-6px] data-[side=top]:bottom-[-6px]",
+      "size-2.5 rotate-45 border border-border-primary bg-surface",
+      "data-[side=bottom]:border-r-0 data-[side=bottom]:border-b-0",
+      "data-[side=top]:border-t-0 data-[side=top]:border-l-0",
+      "data-[side=left]:border-b-0 data-[side=left]:border-l-0",
+      "data-[side=right]:border-t-0 data-[side=right]:border-r-0",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const PreviewCardViewport = ({
+  className,
+  ...props
+}: PreviewCardViewportProps) => (
+  <BasePreviewCard.Viewport className={cn(className)} {...props} />
+)
+
+export const createPreviewCardHandle = BasePreviewCard.createHandle