@boyernick/standard-ui-react 0.1.0

package/src/context-menu.tsx

@@ -0,0 +1,250 @@
+"use client"
+
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import type { ComponentProps } from "react"
+import { IconCheckmark1, IconChevronRightSmall } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type ContextMenuProps = ComponentProps<typeof BaseContextMenu.Root>
+export type ContextMenuTriggerProps = ComponentProps<
+  typeof BaseContextMenu.Trigger
+>
+export type ContextMenuPortalProps = ComponentProps<typeof BaseContextMenu.Portal>
+export type ContextMenuBackdropProps = ComponentProps<
+  typeof BaseContextMenu.Backdrop
+>
+export type ContextMenuPositionerProps = ComponentProps<
+  typeof BaseContextMenu.Positioner
+>
+export type ContextMenuPopupProps = ComponentProps<typeof BaseContextMenu.Popup>
+export type ContextMenuArrowProps = ComponentProps<typeof BaseContextMenu.Arrow>
+export type ContextMenuItemProps = ComponentProps<typeof BaseContextMenu.Item>
+export type ContextMenuLinkItemProps = ComponentProps<
+  typeof BaseContextMenu.LinkItem
+>
+export type ContextMenuSeparatorProps = ComponentProps<
+  typeof BaseContextMenu.Separator
+>
+export type ContextMenuGroupProps = ComponentProps<typeof BaseContextMenu.Group>
+export type ContextMenuGroupLabelProps = ComponentProps<
+  typeof BaseContextMenu.GroupLabel
+>
+export type ContextMenuCheckboxItemProps = ComponentProps<
+  typeof BaseContextMenu.CheckboxItem
+>
+export type ContextMenuCheckboxItemIndicatorProps = ComponentProps<
+  typeof BaseContextMenu.CheckboxItemIndicator
+>
+export type ContextMenuRadioGroupProps = ComponentProps<
+  typeof BaseContextMenu.RadioGroup
+>
+export type ContextMenuRadioItemProps = ComponentProps<
+  typeof BaseContextMenu.RadioItem
+>
+export type ContextMenuRadioItemIndicatorProps = ComponentProps<
+  typeof BaseContextMenu.RadioItemIndicator
+>
+export type ContextMenuSubmenuRootProps = ComponentProps<
+  typeof BaseContextMenu.SubmenuRoot
+>
+export type ContextMenuSubmenuTriggerProps = ComponentProps<
+  typeof BaseContextMenu.SubmenuTrigger
+>
+
+const itemClassName = cn(
+  "flex min-h-8 cursor-default items-center gap-2 rounded-xs px-2.5 py-1.5 text-sm text-fg-primary outline-none select-none",
+  motion.colors,
+  "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary",
+)
+
+const indicatorItemClassName = cn(itemClassName, "pl-2")
+const indicatorClassName =
+  "mr-0.5 flex size-4 shrink-0 items-center justify-center text-fg-primary data-unchecked:invisible"
+
+export const ContextMenu = (props: ContextMenuProps) => (
+  <BaseContextMenu.Root {...props} />
+)
+
+export const ContextMenuTrigger = ({
+  className,
+  ...props
+}: ContextMenuTriggerProps) => (
+  <BaseContextMenu.Trigger className={cn(className)} {...props} />
+)
+
+export const ContextMenuPortal = (props: ContextMenuPortalProps) => (
+  <BaseContextMenu.Portal {...props} />
+)
+
+export const ContextMenuBackdrop = ({
+  className,
+  ...props
+}: ContextMenuBackdropProps) => (
+  <BaseContextMenu.Backdrop className={cn(className)} {...props} />
+)
+
+export const ContextMenuPositioner = ({
+  className,
+  ...props
+}: ContextMenuPositionerProps) => (
+  <BaseContextMenu.Positioner
+    className={cn("z-50 outline-none", className)}
+    {...props}
+  />
+)
+
+export const ContextMenuPopup = ({
+  className,
+  ...props
+}: ContextMenuPopupProps) => (
+  <BaseContextMenu.Popup
+    className={cn(
+      "z-50 min-w-40 overflow-hidden rounded-md border border-border-primary bg-surface p-1 shadow-md outline-none",
+      motion.popupAnchor,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ContextMenuArrow = ({
+  className,
+  ...props
+}: ContextMenuArrowProps) => (
+  <BaseContextMenu.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 ContextMenuItem = ({
+  className,
+  ...props
+}: ContextMenuItemProps) => (
+  <BaseContextMenu.Item className={cn(itemClassName, className)} {...props} />
+)
+
+export const ContextMenuLinkItem = ({
+  className,
+  ...props
+}: ContextMenuLinkItemProps) => (
+  <BaseContextMenu.LinkItem
+    className={cn(itemClassName, "cursor-pointer", className)}
+    {...props}
+  />
+)
+
+export const ContextMenuSeparator = ({
+  className,
+  ...props
+}: ContextMenuSeparatorProps) => (
+  <BaseContextMenu.Separator
+    className={cn("my-1 h-px bg-border-primary", className)}
+    {...props}
+  />
+)
+
+export const ContextMenuGroup = ({
+  className,
+  ...props
+}: ContextMenuGroupProps) => (
+  <BaseContextMenu.Group className={cn(className)} {...props} />
+)
+
+export const ContextMenuGroupLabel = ({
+  className,
+  ...props
+}: ContextMenuGroupLabelProps) => (
+  <BaseContextMenu.GroupLabel
+    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    {...props}
+  />
+)
+
+export const ContextMenuCheckboxItem = ({
+  className,
+  ...props
+}: ContextMenuCheckboxItemProps) => (
+  <BaseContextMenu.CheckboxItem
+    className={cn(indicatorItemClassName, className)}
+    {...props}
+  />
+)
+
+export const ContextMenuCheckboxItemIndicator = ({
+  className,
+  children,
+  keepMounted = true,
+  ...props
+}: ContextMenuCheckboxItemIndicatorProps) => (
+  <BaseContextMenu.CheckboxItemIndicator
+    keepMounted={keepMounted}
+    className={cn(indicatorClassName, className)}
+    {...props}
+  >
+    {children ?? <IconCheckmark1 size={14} className="size-3.5" aria-hidden />}
+  </BaseContextMenu.CheckboxItemIndicator>
+)
+
+export const ContextMenuRadioGroup = ({
+  className,
+  ...props
+}: ContextMenuRadioGroupProps) => (
+  <BaseContextMenu.RadioGroup className={cn(className)} {...props} />
+)
+
+export const ContextMenuRadioItem = ({
+  className,
+  ...props
+}: ContextMenuRadioItemProps) => (
+  <BaseContextMenu.RadioItem
+    className={cn(indicatorItemClassName, className)}
+    {...props}
+  />
+)
+
+export const ContextMenuRadioItemIndicator = ({
+  className,
+  children,
+  keepMounted = true,
+  ...props
+}: ContextMenuRadioItemIndicatorProps) => (
+  <BaseContextMenu.RadioItemIndicator
+    keepMounted={keepMounted}
+    className={cn(indicatorClassName, className)}
+    {...props}
+  >
+    {children ?? <IconCheckmark1 size={14} className="size-3.5" aria-hidden />}
+  </BaseContextMenu.RadioItemIndicator>
+)
+
+export const ContextMenuSubmenuRoot = (props: ContextMenuSubmenuRootProps) => (
+  <BaseContextMenu.SubmenuRoot {...props} />
+)
+
+export const ContextMenuSubmenuTrigger = ({
+  className,
+  children,
+  ...props
+}: ContextMenuSubmenuTriggerProps) => (
+  <BaseContextMenu.SubmenuTrigger
+    className={cn(itemClassName, "w-full justify-between", className)}
+    {...props}
+  >
+    {children}
+    <IconChevronRightSmall
+      size={16}
+      className="size-4 text-fg-tertiary"
+      aria-hidden
+    />
+  </BaseContextMenu.SubmenuTrigger>
+)

package/src/dialog.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { Dialog as BaseDialog } from "@base-ui/react/dialog"
+import type { ComponentProps, HTMLAttributes } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type DialogProps = ComponentProps<typeof BaseDialog.Root>
+export type DialogTriggerProps = ComponentProps<typeof BaseDialog.Trigger>
+export type DialogPortalProps = ComponentProps<typeof BaseDialog.Portal>
+export type DialogBackdropProps = ComponentProps<typeof BaseDialog.Backdrop>
+export type DialogPopupProps = ComponentProps<typeof BaseDialog.Popup>
+export type DialogTitleProps = ComponentProps<typeof BaseDialog.Title>
+export type DialogDescriptionProps = ComponentProps<
+  typeof BaseDialog.Description
+>
+export type DialogCloseProps = ComponentProps<typeof BaseDialog.Close>
+export type DialogHeaderProps = HTMLAttributes<HTMLDivElement>
+
+export const Dialog = (props: DialogProps) => <BaseDialog.Root {...props} />
+
+export const DialogTrigger = ({ className, ...props }: DialogTriggerProps) => (
+  <BaseDialog.Trigger className={cn(className)} {...props} />
+)
+
+export const DialogPortal = (props: DialogPortalProps) => (
+  <BaseDialog.Portal {...props} />
+)
+
+export const DialogBackdrop = ({
+  className,
+  ...props
+}: DialogBackdropProps) => (
+  <BaseDialog.Backdrop
+    className={cn(
+      "fixed inset-0 z-50 bg-black/40 dark:bg-black/60",
+      motion.backdrop,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const DialogPopup = ({ className, ...props }: DialogPopupProps) => (
+  <BaseDialog.Popup
+    className={cn(
+      "fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-6 rounded-xl border border-border-primary bg-surface-raised p-5 shadow-md outline-none max-sm:max-w-[calc(100vw-2rem)]",
+      motion.popupCenter,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const DialogTitle = ({ className, ...props }: DialogTitleProps) => (
+  <BaseDialog.Title
+    className={cn("text-sm-strong text-fg-primary", className)}
+    {...props}
+  />
+)
+
+export const DialogDescription = ({
+  className,
+  ...props
+}: DialogDescriptionProps) => (
+  <BaseDialog.Description
+    className={cn("text-sm leading-relaxed text-fg-secondary", className)}
+    {...props}
+  />
+)
+
+export const DialogClose = ({ className, ...props }: DialogCloseProps) => (
+  <BaseDialog.Close className={cn(className)} {...props} />
+)
+
+export const DialogHeader = ({ className, ...props }: DialogHeaderProps) => (
+  <div className={cn("flex flex-col gap-1", className)} {...props} />
+)

package/src/drawer.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer"
+import type { ComponentProps, HTMLAttributes } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type DrawerProps = ComponentProps<typeof BaseDrawer.Root>
+export type DrawerProviderProps = ComponentProps<typeof BaseDrawer.Provider>
+export type DrawerTriggerProps = ComponentProps<typeof BaseDrawer.Trigger>
+export type DrawerPortalProps = ComponentProps<typeof BaseDrawer.Portal>
+export type DrawerBackdropProps = ComponentProps<typeof BaseDrawer.Backdrop>
+export type DrawerViewportProps = ComponentProps<typeof BaseDrawer.Viewport>
+export type DrawerPopupProps = ComponentProps<typeof BaseDrawer.Popup>
+export type DrawerContentProps = ComponentProps<typeof BaseDrawer.Content>
+export type DrawerTitleProps = ComponentProps<typeof BaseDrawer.Title>
+export type DrawerDescriptionProps = ComponentProps<
+  typeof BaseDrawer.Description
+>
+export type DrawerCloseProps = ComponentProps<typeof BaseDrawer.Close>
+export type DrawerSwipeAreaProps = ComponentProps<typeof BaseDrawer.SwipeArea>
+export type DrawerIndentProps = ComponentProps<typeof BaseDrawer.Indent>
+export type DrawerIndentBackgroundProps = ComponentProps<
+  typeof BaseDrawer.IndentBackground
+>
+export type DrawerHeaderProps = HTMLAttributes<HTMLDivElement>
+
+export const Drawer = (props: DrawerProps) => <BaseDrawer.Root {...props} />
+
+export const DrawerProvider = (props: DrawerProviderProps) => (
+  <BaseDrawer.Provider {...props} />
+)
+
+export const DrawerTrigger = ({ className, ...props }: DrawerTriggerProps) => (
+  <BaseDrawer.Trigger className={cn("cursor-pointer", className)} {...props} />
+)
+
+export const DrawerPortal = (props: DrawerPortalProps) => (
+  <BaseDrawer.Portal {...props} />
+)
+
+export const DrawerBackdrop = ({
+  className,
+  ...props
+}: DrawerBackdropProps) => (
+  <BaseDrawer.Backdrop
+    className={cn(
+      "fixed inset-0 z-50 bg-black/40 dark:bg-black/60",
+      motion.backdrop,
+      "data-swiping:duration-0",
+      "opacity-[calc(1-var(--drawer-swipe-progress,0))]",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const DrawerViewport = ({
+  className,
+  ...props
+}: DrawerViewportProps) => (
+  <BaseDrawer.Viewport
+    className={cn("fixed inset-0 z-50", className)}
+    {...props}
+  />
+)
+
+export const DrawerPopup = ({ className, ...props }: DrawerPopupProps) => (
+  <BaseDrawer.Popup
+    className={cn(
+      "fixed z-50 flex flex-col border-border-primary bg-surface shadow-md outline-none",
+      "transition-[transform,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
+      "data-swiping:duration-0",
+      // Right panel (swipeDirection="right")
+      "data-[swipe-direction=right]:top-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-full data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-sm data-[swipe-direction=right]:border-l",
+      "data-[swipe-direction=right]:translate-x-[var(--drawer-swipe-movement-x)]",
+      "data-[swipe-direction=right]:data-starting-style:translate-x-full",
+      "data-[swipe-direction=right]:data-ending-style:translate-x-full",
+      // Left panel
+      "data-[swipe-direction=left]:top-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:h-full data-[swipe-direction=left]:w-full data-[swipe-direction=left]:max-w-sm data-[swipe-direction=left]:border-r",
+      "data-[swipe-direction=left]:translate-x-[var(--drawer-swipe-movement-x)]",
+      "data-[swipe-direction=left]:data-starting-style:translate-x-[-100%]",
+      "data-[swipe-direction=left]:data-ending-style:translate-x-[-100%]",
+      // Bottom sheet (default swipeDirection="down")
+      "data-[swipe-direction=down]:right-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:left-0 data-[swipe-direction=down]:max-h-[85vh] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t",
+      "data-[swipe-direction=down]:translate-y-[calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y))]",
+      "data-[swipe-direction=down]:data-starting-style:translate-y-full",
+      "data-[swipe-direction=down]:data-ending-style:translate-y-full",
+      // Top sheet
+      "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:right-0 data-[swipe-direction=up]:left-0 data-[swipe-direction=up]:max-h-[85vh] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
+      "data-[swipe-direction=up]:translate-y-[var(--drawer-swipe-movement-y)]",
+      "data-[swipe-direction=up]:data-starting-style:translate-y-[-100%]",
+      "data-[swipe-direction=up]:data-ending-style:translate-y-[-100%]",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const DrawerContent = ({
+  className,
+  ...props
+}: DrawerContentProps) => (
+  <BaseDrawer.Content
+    className={cn(
+      "flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-5 outline-none",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const DrawerTitle = ({ className, ...props }: DrawerTitleProps) => (
+  <BaseDrawer.Title
+    className={cn("text-sm-strong text-fg-primary", className)}
+    {...props}
+  />
+)
+
+export const DrawerDescription = ({
+  className,
+  ...props
+}: DrawerDescriptionProps) => (
+  <BaseDrawer.Description
+    className={cn("text-sm leading-relaxed text-fg-secondary", className)}
+    {...props}
+  />
+)
+
+export const DrawerClose = ({ className, ...props }: DrawerCloseProps) => (
+  <BaseDrawer.Close className={cn("cursor-pointer", className)} {...props} />
+)
+
+export const DrawerSwipeArea = ({
+  className,
+  ...props
+}: DrawerSwipeAreaProps) => (
+  <BaseDrawer.SwipeArea className={cn(className)} {...props} />
+)
+
+export const DrawerIndent = ({ className, ...props }: DrawerIndentProps) => (
+  <BaseDrawer.Indent className={cn(className)} {...props} />
+)
+
+export const DrawerIndentBackground = ({
+  className,
+  ...props
+}: DrawerIndentBackgroundProps) => (
+  <BaseDrawer.IndentBackground className={cn(className)} {...props} />
+)
+
+export const DrawerHeader = ({ className, ...props }: DrawerHeaderProps) => (
+  <div className={cn("flex flex-col gap-1", className)} {...props} />
+)
+
+export const createDrawerHandle = BaseDrawer.createHandle

package/src/empty.tsx

@@ -0,0 +1,52 @@
+import type { ComponentProps } from "react";
+import { cn } from "./lib/cn";
+
+export type EmptyProps = ComponentProps<"div">;
+export type EmptyIconProps = ComponentProps<"div">;
+export type EmptyTitleProps = ComponentProps<"h3">;
+export type EmptyDescriptionProps = ComponentProps<"p">;
+export type EmptyActionsProps = ComponentProps<"div">;
+
+export const Empty = ({ className, ...props }: EmptyProps) => (
+  <div
+    className={cn(
+      "flex min-h-48 flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border-primary bg-surface p-8 text-center",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const EmptyIcon = ({ className, ...props }: EmptyIconProps) => (
+  <div
+    className={cn(
+      "flex size-10 items-center justify-center rounded-lg bg-background-tertiary text-fg-secondary [&_svg]:size-5",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const EmptyTitle = ({ className, ...props }: EmptyTitleProps) => (
+  <h3 className={cn("text-sm-strong text-fg-primary", className)} {...props} />
+);
+
+export const EmptyDescription = ({
+  className,
+  ...props
+}: EmptyDescriptionProps) => (
+  <p
+    className={cn("max-w-sm text-sm text-fg-secondary", className)}
+    {...props}
+  />
+);
+
+export const EmptyActions = ({ className, ...props }: EmptyActionsProps) => (
+  <div
+    className={cn(
+      "mt-1 flex flex-wrap items-center justify-center gap-2",
+      className,
+    )}
+    {...props}
+  />
+);

package/src/field.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { Field as BaseField } from "@base-ui/react/field"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type FieldProps = ComponentProps<typeof BaseField.Root>
+export type FieldLabelProps = ComponentProps<typeof BaseField.Label>
+export type FieldDescriptionProps = ComponentProps<typeof BaseField.Description>
+export type FieldErrorProps = ComponentProps<typeof BaseField.Error>
+export type FieldControlProps = ComponentProps<typeof BaseField.Control>
+export type FieldValidityProps = ComponentProps<typeof BaseField.Validity>
+export type FieldItemProps = ComponentProps<typeof BaseField.Item>
+
+export const Field = ({ className, ...props }: FieldProps) => (
+  <BaseField.Root
+    className={cn("flex w-full flex-col gap-1.5", className)}
+    {...props}
+  />
+)
+
+export const FieldLabel = ({ className, ...props }: FieldLabelProps) => (
+  <BaseField.Label
+    className={cn(
+      "text-sm text-fg-primary data-disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const FieldDescription = ({
+  className,
+  ...props
+}: FieldDescriptionProps) => (
+  <BaseField.Description
+    className={cn("text-xs text-fg-tertiary data-disabled:opacity-50", className)}
+    {...props}
+  />
+)
+
+export const FieldError = ({ className, ...props }: FieldErrorProps) => (
+  <BaseField.Error
+    className={cn("text-xs text-destructive", className)}
+    {...props}
+  />
+)
+
+export const FieldControl = ({ className, ...props }: FieldControlProps) => (
+  <BaseField.Control
+    className={cn(
+      "text-sm flex h-9 w-full cursor-text rounded-md border border-border-secondary bg-surface px-3 text-fg-primary inset-shadow-outline-top outline-none transition-[color,box-shadow] duration-150 ease-out placeholder:text-fg-quaternary",
+      "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-invalid:border-destructive data-invalid:focus-visible:border-destructive data-invalid:focus-visible:ring-destructive/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",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const FieldValidity = (props: FieldValidityProps) => (
+  <BaseField.Validity {...props} />
+)
+
+export const FieldItem = ({ className, ...props }: FieldItemProps) => (
+  <BaseField.Item
+    className={cn(
+      "flex items-center gap-2 data-disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+)

package/src/fieldset.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type FieldsetProps = ComponentProps<typeof BaseFieldset.Root>
+export type FieldsetLegendProps = ComponentProps<typeof BaseFieldset.Legend>
+
+export const Fieldset = ({ className, ...props }: FieldsetProps) => (
+  <BaseFieldset.Root
+    className={cn("flex w-full flex-col gap-3 border-0 p-0", className)}
+    {...props}
+  />
+)
+
+export const FieldsetLegend = ({
+  className,
+  ...props
+}: FieldsetLegendProps) => (
+  <BaseFieldset.Legend
+    className={cn("text-sm text-fg-primary", className)}
+    {...props}
+  />
+)

package/src/form.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { Form as BaseForm } from "@base-ui/react/form"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type FormProps = ComponentProps<typeof BaseForm>
+
+export const Form = ({ className, ...props }: FormProps) => (
+  <BaseForm
+    className={cn("flex w-full flex-col gap-4", className)}
+    {...props}
+  />
+)