"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Label } from "./label.js";
import { cn } from "@open-mercato/shared/lib/utils";
function FormField({
  label,
  id: idProp,
  required = false,
  description,
  error,
  orientation = "vertical",
  disabled = false,
  children,
  className
}) {
  const generatedId = React.useId();
  const fieldId = idProp ?? generatedId;
  const descriptionId = description && !error ? `${fieldId}-desc` : void 0;
  const errorId = error ? `${fieldId}-error` : void 0;
  const ariaDescribedBy = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
  const enhancedChild = React.isValidElement(children) ? React.cloneElement(children, {
    id: fieldId,
    "aria-describedby": ariaDescribedBy,
    "aria-invalid": error ? true : void 0,
    "aria-required": required ? true : void 0,
    disabled: disabled || void 0
  }) : children;
  const isHorizontal = orientation === "horizontal";
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        isHorizontal ? "flex items-center justify-between gap-4" : "flex flex-col gap-1.5",
        disabled && "opacity-50",
        className
      ),
      "data-slot": "form-field",
      children: [
        label ? /* @__PURE__ */ jsxs(
          Label,
          {
            htmlFor: fieldId,
            className: cn(
              isHorizontal && "min-w-0 shrink-0",
              disabled && "cursor-not-allowed"
            ),
            children: [
              label,
              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-icon ml-0.5", "aria-hidden": "true", children: "*" })
            ]
          }
        ) : null,
        /* @__PURE__ */ jsx("div", { className: cn(isHorizontal && "flex-1"), children: enhancedChild }),
        error ? /* @__PURE__ */ jsx(
          "p",
          {
            id: errorId,
            role: "alert",
            className: "text-xs text-status-error-text",
            children: error
          }
        ) : description ? /* @__PURE__ */ jsx(
          "p",
          {
            id: descriptionId,
            className: "text-xs text-muted-foreground",
            children: description
          }
        ) : null
      ]
    }
  );
}
export {
  FormField
};
//# sourceMappingURL=form-field.js.map
