import { jsxs as a, jsx as e } from "react/jsx-runtime";
import { X as L } from "lucide-react";
import d from "../../hooks/useStepper.js";
import { StepperLayout as h } from "../../components/StepperLayout.js";
import { StepperLayoutHeader as y } from "../../components/StepperLayoutHeader.js";
import n from "../../../box/Box.js";
import r from "../../../text/Text.js";
import { StepperLayoutNav as u } from "../../components/StepperLayoutNav.js";
import f from "../../../stepper/components/stepper-step/StepperStep.js";
import { StepperLayoutContent as x } from "../../components/StepperLayoutContent.js";
import { StepperLayoutPanel as c } from "../../components/StepperLayoutPanel.js";
import { StepperLayoutFooter as C } from "../../components/StepperLayoutFooter.js";
import { StepperLayoutBack as g } from "../../components/StepperLayoutBack.js";
import l from "../../../button/Button.js";
import { StepperLayoutNext as S } from "../../components/StepperLayoutNext.js";
import p from "../../../label/Label.js";
import m from "../../../input/Input.js";
const s = [
  { id: "company", title: "Company", description: "Enter company details" },
  { id: "contact", title: "Contact", description: "Enter contact person" },
  { id: "review", title: "Review", description: "Confirm and submit" }
], v = ({ stepper: t }) => {
  const o = t.getStepData("company") ?? { name: "", taxId: "" };
  return /* @__PURE__ */ a(n, { className: "space-y-4 py-2", children: [
    /* @__PURE__ */ a(n, { className: "space-y-1.5", children: [
      /* @__PURE__ */ e(p, { htmlFor: "company-name", children: "Company Name" }),
      /* @__PURE__ */ e(
        m,
        {
          id: "company-name",
          placeholder: "Acme GmbH",
          value: o.name,
          onChange: (i) => t.setStepData("company", { ...o, name: i })
        }
      )
    ] }),
    /* @__PURE__ */ a(n, { className: "space-y-1.5", children: [
      /* @__PURE__ */ e(p, { htmlFor: "company-tax", children: "Tax ID" }),
      /* @__PURE__ */ e(
        m,
        {
          id: "company-tax",
          placeholder: "DE123456789",
          value: o.taxId,
          onChange: (i) => t.setStepData("company", { ...o, taxId: i })
        }
      )
    ] })
  ] });
}, N = ({ stepper: t }) => {
  const o = t.getStepData("contact") ?? { email: "", phone: "" };
  return /* @__PURE__ */ a(n, { className: "space-y-4 py-2", children: [
    /* @__PURE__ */ a(n, { className: "space-y-1.5", children: [
      /* @__PURE__ */ e(p, { htmlFor: "contact-email", children: "Email" }),
      /* @__PURE__ */ e(
        m,
        {
          id: "contact-email",
          type: "email",
          placeholder: "hello@acme.de",
          value: o.email,
          onChange: (i) => t.setStepData("contact", { ...o, email: i })
        }
      )
    ] }),
    /* @__PURE__ */ a(n, { className: "space-y-1.5", children: [
      /* @__PURE__ */ e(p, { htmlFor: "contact-phone", children: "Phone" }),
      /* @__PURE__ */ e(
        m,
        {
          id: "contact-phone",
          placeholder: "+49 000 000",
          value: o.phone,
          onChange: (i) => t.setStepData("contact", { ...o, phone: i })
        }
      )
    ] })
  ] });
}, b = ({ stepper: t }) => {
  const o = t.getAllData();
  return /* @__PURE__ */ a(n, { className: "py-2 space-y-2", children: [
    /* @__PURE__ */ e(r, { type: "muted", children: "Review your details before submitting:" }),
    /* @__PURE__ */ e("pre", { className: "text-xs bg-muted p-3 rounded-md overflow-auto", children: JSON.stringify(o, null, 2) })
  ] });
}, X = () => {
  const t = d(s);
  return /* @__PURE__ */ a(h, { stepper: t, children: [
    /* @__PURE__ */ e(y, { children: /* @__PURE__ */ a(n, { className: "flex flex-col gap-1", children: [
      /* @__PURE__ */ e(r, { type: "h4", weight: "semibold", children: "Create Application" }),
      /* @__PURE__ */ e(r, { type: "muted", children: "Fill in all steps to continue." })
    ] }) }),
    /* @__PURE__ */ e(u, { children: s.map((o) => /* @__PURE__ */ e(f, { title: o.title }, o.id)) }),
    /* @__PURE__ */ a(x, { children: [
      /* @__PURE__ */ e(c, { stepId: "company", children: /* @__PURE__ */ e(v, { stepper: t }) }),
      /* @__PURE__ */ e(c, { stepId: "contact", children: /* @__PURE__ */ e(N, { stepper: t }) }),
      /* @__PURE__ */ e(c, { stepId: "review", children: /* @__PURE__ */ e(b, { stepper: t }) }),
      /* @__PURE__ */ a(C, { children: [
        /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(l, { label: "Back", variant: "outline", icon: "ChevronLeft", iconPosition: "left", onClick: t.layoutProps.onBack }) }),
        /* @__PURE__ */ a(n, { className: "flex gap-2", children: [
          /* @__PURE__ */ e(l, { variant: "ghost", label: "Cancel", onClick: t.reset }),
          /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
            l,
            {
              label: t.isLast ? "Submit" : "Next",
              icon: t.isLast ? void 0 : "ChevronRight",
              iconPosition: "right",
              onClick: t.layoutProps.onNext
            }
          ) })
        ] })
      ] })
    ] })
  ] });
}, q = () => {
  const t = d(s);
  return /* @__PURE__ */ e(n, { className: "max-w-2xl mx-auto", children: /* @__PURE__ */ a(h, { stepper: t, variant: "dialog", children: [
    /* @__PURE__ */ e(y, { children: /* @__PURE__ */ a(n, { className: "flex items-start justify-between", children: [
      /* @__PURE__ */ a(n, { className: "flex flex-col gap-1", children: [
        /* @__PURE__ */ e(r, { type: "h4", weight: "semibold", children: "Create Application" }),
        /* @__PURE__ */ e(r, { type: "muted", children: "Fill in all steps to continue." })
      ] }),
      /* @__PURE__ */ e(n, { className: "-mt-1 -mr-2", children: /* @__PURE__ */ e(l, { variant: "ghost", type: "button", onClick: t.reset, icon: /* @__PURE__ */ e(L, { className: "size-4 opacity-70", size: 8 }) }) })
    ] }) }),
    /* @__PURE__ */ e(u, { children: s.map((o) => /* @__PURE__ */ e(f, { title: o.title }, o.id)) }),
    /* @__PURE__ */ a(x, { children: [
      /* @__PURE__ */ e(c, { stepId: "company", children: /* @__PURE__ */ e(v, { stepper: t }) }),
      /* @__PURE__ */ e(c, { stepId: "contact", children: /* @__PURE__ */ e(N, { stepper: t }) }),
      /* @__PURE__ */ e(c, { stepId: "review", children: /* @__PURE__ */ e(b, { stepper: t }) }),
      /* @__PURE__ */ a(C, { children: [
        /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(l, { label: "Back", variant: "outline", icon: "ChevronLeft", iconPosition: "left", onClick: t.layoutProps.onBack }) }),
        /* @__PURE__ */ a(n, { className: "flex gap-2", children: [
          /* @__PURE__ */ e(l, { variant: "ghost", label: "Cancel", onClick: t.reset }),
          /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
            l,
            {
              label: t.isLast ? "Submit" : "Next",
              icon: t.isLast ? void 0 : "ChevronRight",
              iconPosition: "right",
              onClick: t.layoutProps.onNext
            }
          ) })
        ] })
      ] })
    ] })
  ] }) });
};
export {
  X as DefaultLayoutExample,
  q as DialogLayoutExample
};
//# sourceMappingURL=CompositionExample.js.map
