import { o as w } from "./rolldown-runtime.js";
import { i as q, t as I } from "./vendor/react.js";
import { t as z } from "./check.js";
import { t as h } from "./chevron-down.js";
import { t as C } from "./chevron-up.js";
import { t as k } from "./Button.js";
import { r as f, t as d } from "./utils.js";
import { a as _, c as R, d as D, f as F, h as $, i as L, l as V, m as B, n as G, o as T, p as A, r as P, s as U, t as O, u as E } from "./SelectGroupLabel.js";
import { t as x } from "./label.js";
import { t as v } from "./input3.js";
import { t as H } from "./textarea.js";
import { t as M } from "./Separator.js";
import { n as J } from "./interaction-context.js";
import { t as K } from "./checkbox2.js";
var i = /* @__PURE__ */ w(q(), 1), a = I(), Q = $, W = i.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ (0, a.jsx)(G, {
  ref: t,
  "data-slot": "select-group",
  className: d("scroll-my-1 p-1", e),
  ...r
}));
W.displayName = "Select.Group";
var g = i.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ (0, a.jsx)(A, {
  ref: t,
  "data-slot": "select-value",
  className: d("flex flex-1 text-left", e),
  ...r
}));
g.displayName = "Select.Value";
var b = i.forwardRef(({ className: e, size: r = "md", shape: t = "rounded", state: s = "default", children: n, ...c }, u) => /* @__PURE__ */ (0, a.jsxs)(B, {
  ref: u,
  "data-slot": "select-trigger",
  "data-size": r,
  "data-shape": t,
  "data-state": s,
  "aria-invalid": s === "error" || void 0,
  className: d("flex w-full items-center justify-between gap-1.5 outline-none", "bg-background border shadow-xs transition-[color,border-color,box-shadow] duration-200 ease-out motion-reduce:transition-none", "not-disabled:hover:border-ring/50", "disabled:cursor-not-allowed disabled:opacity-50", "*:data-[slot=select-value]:flex *:data-[slot=select-value]:flex-1 *:data-[slot=select-value]:items-center", "data-[placeholder]:text-muted-foreground", r === "xs" && "h-7 px-3 py-1 text-xs", r === "sm" && "h-8 px-3 py-1.5 text-xs", r === "md" && "h-9 px-3 py-2 text-xs", r === "lg" && "h-10 px-3 py-2.5 text-sm", t === "rounded" && "rounded-xl", t === "round" && "rounded-full", s === "default" && "border-input", s === "success" && "border-success", s === "error" && "border-destructive", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", s === "error" && "focus-visible:ring-destructive/20", e),
  ...c,
  children: [n, /* @__PURE__ */ (0, a.jsx)(F, { render: /* @__PURE__ */ (0, a.jsx)(h, { className: "size-4 shrink-0 text-muted-foreground" }) })]
}));
b.displayName = "Select.Trigger";
var j = i.forwardRef(({ className: e, children: r, side: t = "bottom", sideOffset: s = 4, align: n = "center", alignOffset: c = 0, alignItemWithTrigger: u = !0, ...o }, l) => /* @__PURE__ */ (0, a.jsx)(D, { children: /* @__PURE__ */ (0, a.jsx)(E, {
  side: t,
  sideOffset: s,
  align: n,
  alignOffset: c,
  alignItemWithTrigger: u,
  className: "isolate z-50",
  children: /* @__PURE__ */ (0, a.jsxs)(V, {
    ref: l,
    "data-slot": "select-popup",
    className: d("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto", e),
    ...o,
    children: [
      /* @__PURE__ */ (0, a.jsx)(N, {}),
      /* @__PURE__ */ (0, a.jsx)(R, { children: r }),
      /* @__PURE__ */ (0, a.jsx)(y, {})
    ]
  })
}) }));
j.displayName = "Select.Popup";
var X = i.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ (0, a.jsx)(O, {
  ref: t,
  "data-slot": "select-group-label",
  className: d("text-muted-foreground px-2 py-1.5 text-xs", e),
  ...r
}));
X.displayName = "Select.GroupLabel";
var S = i.forwardRef(({ className: e, children: r, ...t }, s) => /* @__PURE__ */ (0, a.jsxs)(U, {
  ref: s,
  "data-slot": "select-item",
  className: d("focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground transition-colors duration-75 ease-out motion-reduce:transition-none gap-2 rounded-sm py-1.5 pe-8 ps-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", e),
  ...t,
  children: [/* @__PURE__ */ (0, a.jsx)(_, {
    className: "flex flex-1 gap-2 shrink-0 whitespace-nowrap",
    children: r
  }), /* @__PURE__ */ (0, a.jsx)(T, {
    render: /* @__PURE__ */ (0, a.jsx)("span", { className: "pointer-events-none absolute end-2 flex size-4 items-center justify-center" }),
    children: /* @__PURE__ */ (0, a.jsx)(z, { className: "pointer-events-none animate-in zoom-in-75 fade-in duration-150 motion-reduce:animate-none" })
  })]
}));
S.displayName = "Select.Item";
var Y = i.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ (0, a.jsx)(M, {
  ref: t,
  "data-slot": "select-separator",
  className: d("bg-border -mx-1 my-1 h-px pointer-events-none", e),
  ...r
}));
Y.displayName = "Select.Separator";
var N = i.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ (0, a.jsx)(P, {
  ref: t,
  "data-slot": "select-scroll-up-button",
  className: d("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", e),
  ...r,
  children: /* @__PURE__ */ (0, a.jsx)(C, {})
}));
N.displayName = "Select.ScrollUpButton";
var y = i.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ (0, a.jsx)(L, {
  ref: t,
  "data-slot": "select-scroll-down-button",
  className: d("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", e),
  ...r,
  children: /* @__PURE__ */ (0, a.jsx)(h, {})
}));
y.displayName = "Select.ScrollDownButton";
function Z(e) {
  return e.defaultValue !== void 0 ? e.defaultValue : e.type === "checkbox" ? !1 : "";
}
function ee({ field: e, value: r, onChange: t }) {
  const s = i.useId(), n = `${s}-label`, c = i.useCallback((o) => {
    t(e.name, o);
  }, [t, e.name]), u = () => /* @__PURE__ */ (0, a.jsxs)(x, {
    id: n,
    htmlFor: s,
    children: [e.label, e.required && /* @__PURE__ */ (0, a.jsx)("span", {
      className: "text-destructive ml-0.5",
      "aria-hidden": "true",
      children: "*"
    })]
  });
  switch (e.type) {
    case "text":
    case "email":
    case "date":
      return /* @__PURE__ */ (0, a.jsxs)("div", {
        className: "flex flex-col gap-1.5",
        children: [u(), /* @__PURE__ */ (0, a.jsx)(v, {
          id: s,
          type: e.type,
          name: e.name,
          placeholder: e.placeholder,
          required: e.required,
          "aria-required": e.required,
          value: String(r ?? ""),
          onChange: (o) => c(o.target.value),
          "aria-labelledby": n
        })]
      });
    case "number":
      return /* @__PURE__ */ (0, a.jsxs)("div", {
        className: "flex flex-col gap-1.5",
        children: [u(), /* @__PURE__ */ (0, a.jsx)(v, {
          id: s,
          type: "number",
          name: e.name,
          placeholder: e.placeholder,
          required: e.required,
          "aria-required": e.required,
          min: e.min,
          max: e.max,
          value: String(r ?? ""),
          onChange: (o) => c(o.target.value ? Number(o.target.value) : ""),
          "aria-labelledby": n
        })]
      });
    case "textarea":
      return /* @__PURE__ */ (0, a.jsxs)("div", {
        className: "flex flex-col gap-1.5",
        children: [u(), /* @__PURE__ */ (0, a.jsx)(H, {
          id: s,
          name: e.name,
          placeholder: e.placeholder,
          required: e.required,
          "aria-required": e.required,
          rows: e.rows,
          value: String(r ?? ""),
          onChange: (o) => c(o.target.value),
          "aria-labelledby": n
        })]
      });
    case "select": {
      const o = f(e.options);
      return /* @__PURE__ */ (0, a.jsxs)("div", {
        className: "flex flex-col gap-1.5",
        children: [u(), /* @__PURE__ */ (0, a.jsxs)(Q, {
          value: String(r ?? ""),
          onValueChange: c,
          children: [/* @__PURE__ */ (0, a.jsx)(b, {
            id: s,
            "aria-labelledby": n,
            "aria-required": e.required,
            children: /* @__PURE__ */ (0, a.jsx)(g, { placeholder: e.placeholder })
          }), /* @__PURE__ */ (0, a.jsx)(j, { children: o.map((l) => /* @__PURE__ */ (0, a.jsx)(S, {
            value: l.value,
            children: l.label
          }, l.value)) })]
        })]
      });
    }
    case "checkbox":
      return /* @__PURE__ */ (0, a.jsxs)("div", {
        className: "flex items-center gap-2",
        children: [/* @__PURE__ */ (0, a.jsx)(K, {
          id: s,
          checked: !!r,
          onCheckedChange: c,
          "aria-labelledby": n,
          "aria-required": e.required
        }), /* @__PURE__ */ (0, a.jsxs)(x, {
          id: n,
          htmlFor: s,
          className: "cursor-pointer",
          children: [e.label, e.required && /* @__PURE__ */ (0, a.jsx)("span", {
            className: "text-destructive ml-0.5",
            "aria-hidden": "true",
            children: "*"
          })]
        })]
      });
    case "radio": {
      const o = f(e.options);
      return /* @__PURE__ */ (0, a.jsxs)("div", {
        className: "flex flex-col gap-1.5",
        children: [/* @__PURE__ */ (0, a.jsxs)("span", {
          id: n,
          className: "text-sm font-medium text-foreground",
          children: [e.label, e.required && /* @__PURE__ */ (0, a.jsx)("span", {
            className: "text-destructive ml-0.5",
            "aria-hidden": "true",
            children: "*"
          })]
        }), /* @__PURE__ */ (0, a.jsx)("div", {
          className: "flex flex-col gap-2",
          role: "radiogroup",
          "aria-labelledby": n,
          "aria-required": e.required,
          children: o.map((l) => {
            const m = `${s}-${l.value}`;
            return /* @__PURE__ */ (0, a.jsxs)("div", {
              className: "flex items-center gap-2",
              children: [/* @__PURE__ */ (0, a.jsx)("input", {
                type: "radio",
                id: m,
                name: e.name,
                value: l.value,
                checked: r === l.value,
                onChange: (p) => c(p.target.value),
                className: "size-4 accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
              }), /* @__PURE__ */ (0, a.jsx)(x, {
                htmlFor: m,
                className: "cursor-pointer font-normal",
                children: l.label
              })]
            }, l.value);
          })
        })]
      });
    }
    default:
      return null;
  }
}
function ae({ schema: e, className: r }) {
  const { onInteraction: t } = J(), [s, n] = i.useState(() => {
    const l = {};
    for (const m of e.fields) l[m.name] = Z(m);
    return l;
  }), c = i.useCallback((l, m) => {
    n((p) => ({
      ...p,
      [l]: m
    }));
  }, []), u = i.useCallback((l) => {
    l.preventDefault(), t?.({
      componentId: e.id,
      componentType: "form",
      action: "submit",
      value: s,
      timestamp: Date.now()
    });
  }, [
    t,
    e.id,
    s
  ]), o = e.layout === "horizontal";
  return /* @__PURE__ */ (0, a.jsxs)("form", {
    "data-slot": "ai-form",
    "aria-label": e.title ?? "Interactive form",
    className: d("flex flex-col gap-4", r),
    onSubmit: u,
    children: [
      (e.title || e.description) && /* @__PURE__ */ (0, a.jsxs)("div", {
        className: "flex flex-col gap-1",
        children: [e.title && /* @__PURE__ */ (0, a.jsx)("h3", {
          className: "text-base font-semibold text-foreground",
          children: e.title
        }), e.description && /* @__PURE__ */ (0, a.jsx)("p", {
          className: "text-sm text-muted-foreground",
          children: e.description
        })]
      }),
      /* @__PURE__ */ (0, a.jsx)("div", {
        "data-slot": "ai-form-fields",
        className: d("flex gap-4", o ? "flex-row flex-wrap" : "flex-col"),
        children: e.fields.map((l) => /* @__PURE__ */ (0, a.jsx)("div", {
          className: d(o && "flex-1 min-w-[200px]"),
          children: /* @__PURE__ */ (0, a.jsx)(ee, {
            field: l,
            value: s[l.name],
            onChange: c
          })
        }, l.name))
      }),
      /* @__PURE__ */ (0, a.jsx)("div", {
        className: "flex justify-end",
        children: /* @__PURE__ */ (0, a.jsx)(k, {
          type: "submit",
          appearance: "gradient",
          variant: "primary",
          children: e.submitLabel ?? "Submit"
        })
      })
    ]
  });
}
ae.displayName = "AIForm";
export {
  ae as t
};

//# sourceMappingURL=AIForm.js.map