field

1---
2import type { HTMLAttributes } from "astro/types"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7type Props = HTMLAttributes<"div"> & VariantProps<typeof variants>
8 
9const variants = cva(
10  "data-[invalid=true]:text-destructive group/field flex w-full gap-3",
11  {
12    variants: {
13      orientation: {
14        vertical:
15          "flex-col [&>.sr-only]:w-auto [&>:not([role=checkbox]):not([role=radio])]:w-full",
16        horizontal:
17          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
18        responsive:
19          "flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto [&>:not([role=checkbox]):not([role=radio])]:w-full @md/field-group:[&>:not([role=checkbox]):not([role=radio])]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
20      },
21    },
22    defaultVariants: {
23      orientation: "vertical",
24    },
25  }
26)
27 
28const { class: className, orientation = "vertical", ...props } = Astro.props
29---
30 
31<div
32  role="group"
33  data-slot="field"
34  data-orientation={orientation}
35  class={cn(variants({ orientation }), className)}
36  {...props}
37>
38  <slot />
39</div>