import { cva } from "class-variance-authority";
export const fieldVariants = cva(
  "group/field relative flex w-full gap-2 data-[invalid=true]:text-red-400",
  {
    variants: {
      orientation: {
        vertical: ["flex-col *:w-full [&>.sr-only]:w-auto"],
        horizontal: [
          "flex-row items-center",
          "*:data-[slot=field-label]:shrink-0 *:data-[slot=field-label]:whitespace-nowrap",
          "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
        ],
        responsive: [
          "flex-col *:w-full.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto",
          "@md/field-group:*:data-[slot=field-label]:flex-auto",
          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
        ],
        floating: [
          "relative *:data-[slot=field-label]:absolute *:data-[slot=field-label]:text-zinc-500 *:data-[slot=field-label]:z-20",
          "*:data-[slot=field-label]:top-1/2 *:data-[slot=field-label]:-translate-y-1/2 *:data-[slot=field-label]:transition-[top,transform,color,font-size] *:data-[slot=field-label]:duration-180",
          "*:data-[slot=field-label]:pointer-events-none *:data-[slot=field-label]:select-none *:data-[slot=field-label]:cursor-text",
          "has-data-[value=true]:**:data-[slot=field-label]:top-0",
          "**:data-[slot=field-label]:bg-white",
          "data-[disabled=true]:**:data-[slot=field-label]:bg-transparent",
          "**:data-[slot=field-label]:px-1",
          "**:data-[slot=field-label]:text-sm",
          "has-data-[value=true]:**:data-[slot=field-label]:text-[0.625rem]",
          // Float on focus via `focus-within`, NOT `[data-slot=input-group-control]:focus`:
          // `InputGroupInput`/`InputGroupTextarea` forward that slot to `Input`/`Textarea`,
          // which hard-code `data-slot=input`/`textarea` on the focusable element, so the
          // forwarded slot never lands there and the focus selector would never match.
          "focus-within:**:data-[slot=field-label]:top-0",
          "has-data-[state=open]:**:data-[slot=field-label]:top-0",
          "focus-within:**:data-[slot=field-label]:text-[0.625rem]",
          "has-data-[state=open]:**:data-[slot=field-label]:text-[0.625rem]",
          "focus-within:**:data-[slot=field-label]:text-zinc-700",
          "has-data-[state=open]:**:data-[slot=field-label]:text-zinc-700",
          "has-data-[value=true]:**:data-[slot=field-label]:text-zinc-700",
          "data-[disabled=true]:**:data-[slot=field-label]:text-zinc-400",
          "*:data-[slot=field-label]:left-3",
          "has-[[data-slot=input-group-addon][data-align=inline-start]]:**:data-[slot=field-label]:left-7",
          // The floating label is notched into the top border, so we nudge the
          // input baseline 0.5 down to keep its caret/text optically centered
          // against the notch. Only applied when a label is actually present —
          // a label-less floating field should sit flush with the border.
          "has-[>[data-slot=field-label]]:**:data-[slot=input]:translate-y-0.5"
        ],
        contents: [
          "contents",
          "*:data-[slot=field-label]:flex *:data-[slot=field-label]:w-full *:data-[slot=field-label]:min-h-full",
          "*:data-[slot=field-label]:items-center *:data-[slot=field-label]:justify-center *:data-[slot=field-label]:text-center",
          "*:data-[slot=field-content]:min-w-0 *:data-[slot=field-content]:w-full *:data-[slot=field-content]:min-h-full"
        ]
      }
    },
    defaultVariants: {
      orientation: "horizontal"
    }
  }
);
export { default as Field } from "./Field.vue";
export { default as FieldContent } from "./FieldContent.vue";
export { default as FieldDescription } from "./FieldDescription.vue";
export { default as FieldError } from "./FieldError.vue";
export { default as FieldGroup } from "./FieldGroup.vue";
export { default as FieldLabel } from "./FieldLabel.vue";
export { default as FieldLegend } from "./FieldLegend.vue";
export { default as FieldMessages } from "./FieldMessages.vue";
export { default as FieldSeparator } from "./FieldSeparator.vue";
export { default as FieldWarning } from "./FieldWarning.vue";
export { default as FieldSet } from "./FieldSet.vue";
export { default as FieldTitle } from "./FieldTitle.vue";
