daply-ui 0.0.0 → 1.1.0

package/dist/daply-ui.js

@@ -1,5 +1,1062 @@
-import { jsx as o } from "react/jsx-runtime";
-const n = ({ children: t }) => /* @__PURE__ */ o("button", { children: t });
+import { jsxs as d, jsx as e, Fragment as A } from "react/jsx-runtime";
+import { useState as C } from "react";
+const ne = {
+  small: {
+    fontSize: "14px",
+    padding: "8px 16px"
+  },
+  default: {
+    fontSize: "16px",
+    padding: "12px 24px"
+  },
+  large: {
+    fontSize: "18px",
+    padding: "16px 32px"
+  }
+}, ye = ({
+  label: o,
+  disabled: i = !1,
+  color: s = "blue-900",
+  icon: r,
+  className: L = "",
+  style: I = {},
+  type: h = "button",
+  iconPosition: m = "right",
+  isNoLabelForSm: j = !1,
+  size: S = "default",
+  onClick: F = () => {
+  },
+  children: c,
+  variant: w = "primary",
+  theme: M = "auto"
+}) => {
+  const g = M === "dark" || M === "auto" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, v = ne[S] || ne.default, B = c || /* @__PURE__ */ d(A, { children: [
+    m === "left" && r && /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center" }, children: r }),
+    !j && o && /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center" }, children: o }),
+    m === "right" && r && /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center" }, children: r })
+  ] }), k = w === "primary" || s.includes("blue-700") || s.includes("blue-600") || s.includes("blue-500"), p = w === "secondary", u = {
+    position: "relative",
+    display: "inline-block",
+    width: "100%"
+  }, z = {
+    position: "absolute",
+    inset: 0,
+    backgroundColor: i ? "#374151" : k ? "#1d4ed8" : p ? g ? "#1f2937" : "#e5e7eb" : "#1e3a8a",
+    borderRadius: "8px",
+    transform: "translateY(4px)",
+    transition: "all 0.3s ease"
+  }, W = {
+    ...v,
+    color: p ? g ? "#ffffff" : "#1f2937" : "#ffffff",
+    borderRadius: "8px",
+    backgroundColor: p ? g ? "#000000" : "#f3f4f6" : k ? "#3b82f6" : "#000000",
+    position: "relative",
+    border: p ? g ? "1px solid #1e3a8a" : "1px solid #e5e7eb" : k ? "1px solid #1e3a8a" : i ? "1px solid #374151" : "1px solid #1e3a8a",
+    display: "flex",
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    fontWeight: "800",
+    gap: "8px",
+    transition: "all 0.3s ease",
+    cursor: i ? "not-allowed" : "pointer",
+    opacity: i ? 0.5 : 1,
+    outline: "none",
+    fontFamily: "inherit",
+    ...I
+  }, [D, y] = C(!1), b = () => {
+    i || y(!0);
+  }, H = () => {
+    y(!1);
+  };
+  return /* @__PURE__ */ d("div", { style: u, className: L, children: [
+    /* @__PURE__ */ e("div", { style: z }),
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: h,
+        style: { ...W, ...D && !i ? {
+          transform: "translateY(4px)",
+          color: p ? g ? "#ffffff" : "#1f2937" : "#93c5fd",
+          backgroundColor: p ? g ? "#111827" : "#e5e7eb" : void 0
+        } : {} },
+        disabled: i,
+        onClick: F,
+        onMouseEnter: b,
+        onMouseLeave: H,
+        children: B
+      }
+    )
+  ] });
+}, re = ({ name: o, value: i, onChange: s, error: r, schema: L, theme: I = "auto" }) => {
+  const {
+    type: h = "text",
+    required: m = !1,
+    placeholder: j = "",
+    label: S,
+    className: F = ""
+  } = L, c = I === "dark" || I === "auto" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, w = {
+    width: "100%",
+    boxSizing: "border-box",
+    // 👈 CRITICAL
+    padding: "16px",
+    borderRadius: "8px",
+    outline: "none",
+    transition: "all 0.2s ease",
+    fontSize: "16px",
+    fontFamily: "inherit",
+    border: r ? `2px solid ${c ? "#f87171" : "#ef4444"}` : `1px solid ${c ? "#374151" : "#d1d5db"}`,
+    backgroundColor: r ? c ? "rgba(153, 27, 27, 0.1)" : "rgba(254, 226, 226, 1)" : c ? "#2a2a2a" : "#ffffff",
+    color: c ? "#ffffff" : "#111827"
+  }, M = {
+    ...w,
+    borderColor: r ? c ? "#f87171" : "#ef4444" : "#3b82f6",
+    boxShadow: r ? `0 0 0 3px ${c ? "rgba(248, 113, 113, 0.2)" : "rgba(239, 68, 68, 0.2)"}` : "0 0 0 3px rgba(59, 130, 246, 0.2)"
+  }, g = {
+    display: "block",
+    fontWeight: "500",
+    marginBottom: "8px",
+    color: c ? "#ffffff" : "#111827",
+    fontSize: "14px"
+  }, v = {
+    marginTop: "4px",
+    fontSize: "14px",
+    color: c ? "#f87171" : "#dc2626"
+  }, B = {
+    color: c ? "#f87171" : "#ef4444",
+    marginLeft: "4px"
+  }, k = {
+    marginBottom: "24px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    width: "100%"
+  }, p = c ? "#6b7280" : "#9ca3af";
+  return h === "textarea" ? /* @__PURE__ */ d("div", { style: k, children: [
+    S ? /* @__PURE__ */ d("label", { htmlFor: o, style: g, children: [
+      S,
+      m ? /* @__PURE__ */ e("span", { style: B, children: "*" }) : null
+    ] }) : null,
+    /* @__PURE__ */ e(
+      "textarea",
+      {
+        id: o,
+        name: o,
+        value: i,
+        onChange: s,
+        required: m,
+        placeholder: j,
+        rows: L.rows || 4,
+        style: w,
+        onFocus: (u) => {
+          Object.assign(u.target.style, M);
+        },
+        onBlur: (u) => {
+          Object.assign(u.target.style, w);
+        },
+        className: F
+      }
+    ),
+    r ? /* @__PURE__ */ e("p", { style: v, children: r }) : null,
+    /* @__PURE__ */ e("style", { children: `
+          textarea::placeholder { color: ${p}; }
+        ` })
+  ] }) : /* @__PURE__ */ d("div", { style: k, children: [
+    S ? /* @__PURE__ */ d("label", { htmlFor: o, style: g, children: [
+      S,
+      m ? /* @__PURE__ */ e("span", { style: B, children: "*" }) : null
+    ] }) : null,
+    /* @__PURE__ */ e(
+      "input",
+      {
+        id: o,
+        name: o,
+        type: h,
+        value: i,
+        onChange: s,
+        required: m,
+        placeholder: j,
+        style: w,
+        onFocus: (u) => {
+          Object.assign(u.target.style, M);
+        },
+        onBlur: (u) => {
+          Object.assign(u.target.style, w);
+        },
+        className: F
+      }
+    ),
+    r ? /* @__PURE__ */ e("p", { style: v, children: r }) : null,
+    /* @__PURE__ */ e("style", { children: `
+        input::placeholder { color: ${p}; }
+      ` })
+  ] });
+}, xe = (o) => {
+  const {
+    formId: i,
+    siteId: s,
+    fields: r,
+    baseUrl: L,
+    apiToken: I,
+    encryptedDbName: h,
+    pageUrl: m,
+    pageId: j,
+    sessionId: S,
+    metadata: F,
+    onSuccess: c,
+    onError: w,
+    submitButtonText: M = "Submit",
+    submitButtonClassName: g = "",
+    formClassName: v = "",
+    loadingText: B = "Submitting...",
+    theme: k = "auto"
+  } = o, p = r.reduce((t, n) => (t[n.name] = n.defaultValue || "", t), {}), [u, z] = C(p), [W, D] = C({}), [y, b] = C(!1), [H, P] = C(!1), N = k === "dark" || k === "auto" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, J = (t) => {
+    const { name: n, value: $ } = t.target;
+    z((f) => ({
+      ...f,
+      [n]: $
+    })), W[n] && D((f) => {
+      const R = { ...f };
+      return delete R[n], R;
+    });
+  }, _ = () => {
+    const t = {};
+    return r.forEach((n) => {
+      const $ = u[n.name], f = String($ || "");
+      if (n.required && !f.trim()) {
+        t[n.name] = `${n.label || n.name} is required`;
+        return;
+      }
+      if (n.type === "email" && f && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f)) {
+        t[n.name] = "Please enter a valid email address";
+        return;
+      }
+      if (n.type === "url" && f)
+        try {
+          new URL(f);
+        } catch {
+          t[n.name] = "Please enter a valid URL";
+          return;
+        }
+      if (n.validation && f) {
+        const R = n.validation(f);
+        if (R) {
+          t[n.name] = R;
+          return;
+        }
+      }
+    }), D(t), Object.keys(t).length === 0;
+  }, E = async (t) => {
+    if (t.preventDefault(), !!_()) {
+      b(!0);
+      try {
+        const n = r.reduce((O, Y) => (O[Y.name] = {
+          type: Y.type,
+          required: Y.required
+        }, O), {}), $ = {
+          formId: i,
+          siteId: s,
+          formData: u,
+          formSchema: n,
+          ...m && { pageUrl: m },
+          ...j && { pageId: j },
+          ...S && { sessionId: S },
+          ...F && { metadata: F }
+        }, f = await fetch(`${L}/api/v1/form-submissions`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${I}`,
+            "x-encrypted-db-name": h
+          },
+          body: JSON.stringify($)
+        });
+        if (!f.ok) {
+          const O = await f.json().catch(() => ({}));
+          throw new Error(O.message || `HTTP error! status: ${f.status}`);
+        }
+        const R = await f.json();
+        z(p), D({}), c && c(R);
+      } catch (n) {
+        console.error("Form submission error:", n), w && w(n);
+      } finally {
+        b(!1);
+      }
+    }
+  }, X = {
+    maxWidth: "612px",
+    margin: "0 auto",
+    padding: "32px",
+    backgroundColor: N ? "#1a1a1a" : "#ffffff",
+    borderRadius: "12px",
+    boxShadow: N ? "0 25px 50px -12px rgba(0, 0, 0, 0.5)" : "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+    border: `1px solid ${N ? "#1f2937" : "#e5e7eb"}`
+  }, V = {
+    width: "100%",
+    padding: "16px 24px",
+    background: y ? "linear-gradient(to right, #4b5563, #4b5563)" : H ? "linear-gradient(to right, #1d4ed8, #1e40af)" : "linear-gradient(to right, #2563eb, #1d4ed8)",
+    color: "#ffffff",
+    fontWeight: "bold",
+    fontSize: "18px",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    borderRadius: "8px",
+    border: "none",
+    cursor: y ? "not-allowed" : "pointer",
+    opacity: y ? 0.5 : 1,
+    transition: "all 0.2s ease",
+    outline: "none",
+    fontFamily: "inherit"
+  };
+  return /* @__PURE__ */ d(
+    "form",
+    {
+      onSubmit: E,
+      style: X,
+      className: v,
+      children: [
+        r.map((t) => /* @__PURE__ */ e(
+          re,
+          {
+            name: t.name,
+            value: String(u[t.name] || ""),
+            onChange: J,
+            error: W[t.name],
+            schema: t,
+            theme: k
+          },
+          t.name
+        )),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "submit",
+            disabled: y,
+            style: V,
+            onMouseEnter: () => !y && P(!0),
+            onMouseLeave: () => P(!1),
+            onFocus: (t) => {
+              y || (t.target.style.boxShadow = "0 0 0 3px rgba(59, 130, 246, 0.3)");
+            },
+            onBlur: (t) => {
+              t.target.style.boxShadow = "none";
+            },
+            className: g,
+            children: y ? B : M
+          }
+        )
+      ]
+    }
+  );
+}, Se = ({
+  steps: o,
+  formId: i,
+  siteId: s,
+  baseUrl: r,
+  apiToken: L,
+  encryptedDbName: I,
+  pageUrl: h,
+  pageId: m,
+  sessionId: j,
+  metadata: S,
+  onSuccess: F,
+  onError: c,
+  submitButtonText: w = "Submit",
+  submitButtonClassName: M = "",
+  formClassName: g = "",
+  loadingText: v = "Submitting...",
+  theme: B = "auto",
+  showStepIndicator: k = !0
+}) => {
+  const [p, u] = C(0), [z, W] = C({}), [D, y] = C({}), [b, H] = C(!1), [P, N] = C(!1), [J, _] = C(!1), E = o[p], X = p === 0, V = p === o.length - 1, t = B === "dark" || B === "auto" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, n = (a) => {
+    const { name: l, value: Z } = a.target;
+    W((x) => ({
+      ...x,
+      [l]: Z
+    })), D[l] && y((x) => {
+      const q = { ...x };
+      return delete q[l], q;
+    });
+  }, $ = () => {
+    const a = {};
+    return E.fields.forEach((l) => {
+      const Z = z[l.name], x = String(Z || "");
+      if (l.required && !x.trim()) {
+        a[l.name] = `${l.label || l.name} is required`;
+        return;
+      }
+      if (l.type === "email" && x && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(x)) {
+        a[l.name] = "Please enter a valid email address";
+        return;
+      }
+      if (l.type === "url" && x)
+        try {
+          new URL(x);
+        } catch {
+          a[l.name] = "Please enter a valid URL";
+          return;
+        }
+      if (l.validation && x) {
+        const q = l.validation(x);
+        if (q) {
+          a[l.name] = q;
+          return;
+        }
+      }
+    }), y(a), Object.keys(a).length === 0;
+  }, f = () => {
+    $() && (u((a) => Math.min(a + 1, o.length - 1)), window.scrollTo({ top: 0, behavior: "smooth" }));
+  }, R = () => {
+    u((a) => Math.max(a - 1, 0)), window.scrollTo({ top: 0, behavior: "smooth" });
+  }, O = async (a) => {
+    if (a.preventDefault(), !V) {
+      f();
+      return;
+    }
+    if ($()) {
+      H(!0);
+      try {
+        const l = o.reduce((K, ce) => (ce.fields.forEach((te) => {
+          K[te.name] = {
+            type: te.type,
+            required: te.required
+          };
+        }), K), {}), Z = {
+          formId: i,
+          siteId: s,
+          formData: z,
+          formSchema: l,
+          ...h && { pageUrl: h },
+          ...m && { pageId: m },
+          ...j && { sessionId: j },
+          ...S && { metadata: S }
+        }, x = await fetch(`${r}/api/v1/form-submissions`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${L}`,
+            "x-encrypted-db-name": I
+          },
+          body: JSON.stringify(Z)
+        });
+        if (!x.ok) {
+          const K = await x.json().catch(() => ({}));
+          throw new Error(
+            K.message || `HTTP error! status: ${x.status}`
+          );
+        }
+        const q = await x.json();
+        W({}), y({}), u(0), F && F(q);
+      } catch (l) {
+        console.error("Form submission error:", l), c && c(l);
+      } finally {
+        H(!1);
+      }
+    }
+  }, Y = {
+    maxWidth: "612px",
+    margin: "0 auto",
+    padding: "32px",
+    backgroundColor: t ? "#1a1a1a" : "#ffffff",
+    borderRadius: "12px",
+    boxShadow: t ? "0 25px 50px -12px rgba(0, 0, 0, 0.5)" : "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+    border: `1px solid ${t ? "#1f2937" : "#e5e7eb"}`
+  }, G = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "32px",
+    gap: "8px"
+  }, Q = (a) => ({
+    flex: 1,
+    height: "4px",
+    borderRadius: "2px",
+    backgroundColor: a <= p ? "#2563eb" : t ? "#374151" : "#e5e7eb",
+    transition: "background-color 0.3s ease"
+  }), U = {
+    fontSize: "24px",
+    fontWeight: "bold",
+    color: t ? "#ffffff" : "#111827",
+    marginBottom: "8px"
+  }, ee = {
+    fontSize: "14px",
+    color: t ? "#9ca3af" : "#6b7280",
+    marginBottom: "24px"
+  }, T = {
+    fontSize: "14px",
+    fontWeight: "500",
+    color: t ? "#9ca3af" : "#6b7280",
+    marginBottom: "16px"
+  }, ae = {
+    position: "fixed",
+    bottom: "1rem",
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: "calc(100% - 2rem)",
+    maxWidth: "500px",
+    zIndex: 50
+  }, ie = {
+    background: t ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.05)",
+    backdropFilter: "blur(20px) saturate(120%)",
+    WebkitBackdropFilter: "blur(20px) saturate(120%)",
+    border: t ? "1px solid rgba(255, 255, 255, 0.2)" : "1px solid rgba(0, 0, 0, 0.1)",
+    borderRadius: "16px",
+    padding: "16px",
+    boxShadow: t ? "0 25px 50px -12px rgba(0, 0, 0, 0.8)" : "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: "16px",
+    transition: "all 0.3s ease-in-out"
+  }, se = {
+    width: "64px",
+    minWidth: "64px",
+    height: "64px",
+    padding: "0",
+    background: t ? "#e2e8f0" : "#f1f5f9",
+    color: t ? "#111827" : "#475569",
+    borderRadius: "12px",
+    border: "none",
+    cursor: "pointer",
+    transition: "all 0.3s ease",
+    outline: "none",
+    fontFamily: "inherit",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+    transform: J ? "scale(1.03)" : "scale(1)"
+  }, oe = {
+    flex: 1,
+    height: "64px",
+    padding: "16px 24px",
+    background: b ? t ? "#4b5563" : "#94a3b8" : P ? t ? "#1e40af" : "#1d4ed8" : t ? "#2563eb" : "#3b82f6",
+    color: "#ffffff",
+    fontWeight: "bold",
+    fontSize: "20px",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    borderRadius: "12px",
+    border: "none",
+    cursor: b ? "not-allowed" : "pointer",
+    opacity: b ? 0.5 : 1,
+    transition: "all 0.3s ease",
+    outline: "none",
+    fontFamily: "inherit",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    transform: P && !b ? "scale(1.03)" : "scale(1)"
+  }, le = {
+    ...oe,
+    background: b ? "#4b5563" : P ? "#15803d" : "#16a34a"
+  }, de = {
+    marginBottom: "160px"
+    // Space for floating navigation
+  };
+  return /* @__PURE__ */ d("form", { onSubmit: O, style: Y, className: g, children: [
+    k && /* @__PURE__ */ d(A, { children: [
+      /* @__PURE__ */ d("div", { style: T, children: [
+        "Step ",
+        p + 1,
+        " of ",
+        o.length
+      ] }),
+      /* @__PURE__ */ e("div", { style: G, children: o.map((a, l) => /* @__PURE__ */ e("div", { style: Q(l) }, l)) })
+    ] }),
+    E.title && /* @__PURE__ */ e("h2", { style: U, children: E.title }),
+    E.description && /* @__PURE__ */ e("p", { style: ee, children: E.description }),
+    /* @__PURE__ */ e("div", { style: de, children: E.fields.map((a) => /* @__PURE__ */ e(
+      re,
+      {
+        name: a.name,
+        value: String(z[a.name] || ""),
+        onChange: n,
+        error: D[a.name],
+        schema: a,
+        theme: B
+      },
+      a.name
+    )) }),
+    /* @__PURE__ */ e("div", { style: ae, children: /* @__PURE__ */ d("div", { style: ie, children: [
+      !X && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: R,
+          style: se,
+          onMouseEnter: () => _(!0),
+          onMouseLeave: () => _(!1),
+          disabled: b,
+          "aria-label": "Previous step",
+          children: /* @__PURE__ */ e(
+            "svg",
+            {
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ e("path", { d: "m15 18-6-6 6-6" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "submit",
+          disabled: b,
+          style: V ? le : oe,
+          onMouseEnter: () => !b && N(!0),
+          onMouseLeave: () => N(!1),
+          onFocus: (a) => {
+            b || (a.target.style.boxShadow = "0 0 0 3px rgba(59, 130, 246, 0.3)");
+          },
+          onBlur: (a) => {
+            a.target.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+          },
+          className: M,
+          children: b ? /* @__PURE__ */ d(A, { children: [
+            /* @__PURE__ */ e(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                style: {
+                  animation: "spin 1s linear infinite"
+                },
+                children: /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+              }
+            ),
+            /* @__PURE__ */ e("style", { children: `
+                  @keyframes spin {
+                    from { transform: rotate(0deg); }
+                    to { transform: rotate(360deg); }
+                  }
+                ` }),
+            v
+          ] }) : V ? /* @__PURE__ */ d(A, { children: [
+            w,
+            /* @__PURE__ */ d(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ e("path", { d: "m22 2-7 20-4-9-9-4Z" }),
+                  /* @__PURE__ */ e("path", { d: "M22 2 11 13" })
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ d(A, { children: [
+            "Next",
+            /* @__PURE__ */ e(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ e("path", { d: "m9 18 6-6-6-6" })
+              }
+            )
+          ] })
+        }
+      )
+    ] }) })
+  ] });
+}, pe = (o) => {
+  const i = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/, s = o.match(i);
+  return s && s[2].length === 11 ? s[2] : null;
+}, ue = (o, i = !0) => {
+  const s = pe(o);
+  if (!s) return o;
+  const r = new URLSearchParams({
+    autoplay: i ? "1" : "0",
+    rel: "0",
+    // Don't show related videos
+    modestbranding: "1",
+    // Minimal YouTube branding
+    showinfo: "0",
+    // Don't show video info
+    fs: "1",
+    // Allow fullscreen
+    enablejsapi: "1",
+    // Enable JS API
+    playsinline: "1",
+    // Play inline on mobile
+    controls: "1",
+    // Show controls
+    disablekb: "0",
+    // Enable keyboard controls
+    iv_load_policy: "3",
+    // Don't show annotations
+    cc_load_policy: "0",
+    // Don't show captions by default
+    start: "0",
+    // Start from beginning
+    origin: typeof window < "u" ? window.location.origin : ""
+  });
+  return `https://www.youtube.com/embed/${s}?${r.toString()}`;
+}, fe = (o, i, s, r, L) => {
+  const I = "https://app.daply.ai/embed/video", h = new URLSearchParams({
+    src: o,
+    title: i,
+    author: s || "",
+    date: r || (/* @__PURE__ */ new Date()).toISOString()
+  });
+  return L && h.append("autoplay", "1"), `${I}?${h.toString()}`;
+}, he = (o) => o.includes("storage.googleapis.com/daply-transcoder-storage") && o.includes("manifest.m3u8"), ge = (o) => o.includes(".m3u8") || o.includes("/manifest.m3u8"), we = ({
+  videoUrl: o,
+  youtubeUrl: i,
+  title: s,
+  author: r = "Daply",
+  date: L = (/* @__PURE__ */ new Date()).toISOString(),
+  thumbnailUrl: I,
+  autoplay: h = !1,
+  className: m = "",
+  onVideoClick: j,
+  theme: S = "auto"
+}) => {
+  const [F, c] = C(h), [w, M] = C(!h), [g, v] = C(!1), B = S === "dark" || S === "auto" && typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, k = !!i, p = o && he(o), u = o && ge(o), z = !!(o || i), W = () => {
+    v(!0), c(!0), M(!1), j && j(), setTimeout(() => v(!1), 1e3);
+  }, D = () => {
+    const T = i || o;
+    T && window.open(T, "_blank");
+  }, y = {
+    position: "relative",
+    aspectRatio: "16 / 9",
+    backgroundColor: "#000000",
+    borderRadius: "8px",
+    overflow: "hidden"
+  }, b = {
+    position: "relative",
+    width: "100%",
+    height: "100%"
+  }, H = {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  }, P = {
+    width: "100%",
+    height: "100%",
+    background: "linear-gradient(135deg, #1f2937 0%, #111827 100%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, N = {
+    position: "absolute",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.4)"
+  }, J = {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, _ = {
+    width: "64px",
+    height: "64px",
+    borderRadius: "50%",
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    backdropFilter: "blur(10px)",
+    border: "2px solid rgba(255, 255, 255, 0.2)",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.3s ease"
+  }, E = {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    background: "linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent)",
+    padding: "16px"
+  }, X = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, V = {
+    flex: 1
+  }, t = {
+    color: "#ffffff",
+    fontWeight: "500",
+    fontSize: "14px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }, n = {
+    color: "rgba(255, 255, 255, 0.8)",
+    fontSize: "12px"
+  }, $ = {
+    position: "absolute",
+    top: "12px",
+    right: "12px",
+    padding: "4px 8px",
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    backdropFilter: "blur(10px)",
+    borderRadius: "9999px",
+    fontSize: "12px",
+    color: "#ffffff"
+  }, f = {
+    width: "32px",
+    height: "32px",
+    padding: 0,
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    backdropFilter: "blur(10px)",
+    borderRadius: "4px",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background-color 0.3s ease"
+  }, R = {
+    position: "absolute",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10
+  }, O = {
+    width: "32px",
+    height: "32px",
+    border: "2px solid transparent",
+    borderTopColor: "rgba(255, 255, 255, 0.8)",
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite"
+  }, Y = {
+    width: "100%",
+    height: "100%",
+    position: "relative"
+  }, G = {
+    width: "100%",
+    height: "100%",
+    borderRadius: "8px",
+    backgroundColor: "#000000"
+  }, Q = {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    borderRadius: "8px",
+    backgroundColor: "#000000"
+  }, U = {
+    aspectRatio: "16 / 9",
+    backgroundColor: B ? "#111827" : "#f3f4f6",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, ee = {
+    textAlign: "center",
+    color: B ? "#9ca3af" : "#6b7280"
+  };
+  return z ? /* @__PURE__ */ d(A, { children: [
+    /* @__PURE__ */ e("style", { children: `
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+    /* @__PURE__ */ e("div", { style: y, className: m, children: w && !F ? /* @__PURE__ */ d("div", { style: b, children: [
+      I ? /* @__PURE__ */ e("img", { src: I, alt: s, style: H, loading: "lazy" }) : /* @__PURE__ */ e("div", { style: P, children: /* @__PURE__ */ d("div", { style: { textAlign: "center", color: "#ffffff" }, children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: "48px",
+              height: "48px",
+              backgroundColor: "rgba(255, 255, 255, 0.2)",
+              borderRadius: "50%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              margin: "0 auto",
+              backdropFilter: "blur(10px)"
+            },
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                style: { width: "24px", height: "24px", marginLeft: "4px" },
+                fill: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ e("path", { d: "M8 5v14l11-7z" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e("p", { style: { fontSize: "14px", fontWeight: "500", marginTop: "8px" }, children: s })
+      ] }) }),
+      /* @__PURE__ */ e("div", { style: N }),
+      /* @__PURE__ */ e("div", { style: J, children: /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: W,
+          style: _,
+          onMouseEnter: (T) => {
+            T.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+          },
+          onMouseLeave: (T) => {
+            T.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+          },
+          children: /* @__PURE__ */ e(
+            "svg",
+            {
+              style: { width: "32px", height: "32px", color: "#ffffff", marginLeft: "4px" },
+              fill: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ e("path", { d: "M8 5v14l11-7z" })
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { style: E, children: /* @__PURE__ */ d("div", { style: X, children: [
+        /* @__PURE__ */ d("div", { style: V, children: [
+          /* @__PURE__ */ e("h4", { style: t, children: s }),
+          /* @__PURE__ */ d("p", { style: n, children: [
+            r,
+            " • ",
+            new Date(L).toLocaleDateString()
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: D,
+            style: f,
+            onMouseEnter: (T) => {
+              T.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
+            },
+            onMouseLeave: (T) => {
+              T.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+            },
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                style: { width: "16px", height: "16px", color: "#ffffff" },
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                  }
+                )
+              }
+            )
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ e("div", { style: $, children: k ? "YouTube" : p ? "HLS Stream" : u ? "Live Stream" : "Video" })
+    ] }) : /* @__PURE__ */ d("div", { style: Y, children: [
+      g && /* @__PURE__ */ e("div", { style: R, children: /* @__PURE__ */ e("div", { style: O }) }),
+      k && i ? /* @__PURE__ */ e(
+        "iframe",
+        {
+          src: ue(i, h),
+          width: "100%",
+          height: "100%",
+          frameBorder: "0",
+          allowFullScreen: !0,
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+          title: s,
+          style: G,
+          loading: "lazy",
+          onLoad: () => v(!1),
+          onError: () => v(!1)
+        }
+      ) : p || u ? /* @__PURE__ */ e(
+        "iframe",
+        {
+          src: fe(o, s, r, L, h),
+          width: "100%",
+          height: "100%",
+          frameBorder: "0",
+          allowFullScreen: !0,
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+          title: `${s} - Video Player`,
+          style: G,
+          onLoad: () => v(!1)
+        }
+      ) : /* @__PURE__ */ e(
+        "video",
+        {
+          src: o ?? void 0,
+          controls: !0,
+          autoPlay: h,
+          preload: "metadata",
+          controlsList: "nodownload",
+          style: Q,
+          onLoadStart: () => v(!1),
+          children: "Your browser does not support the video tag."
+        }
+      )
+    ] }) })
+  ] }) : /* @__PURE__ */ e("div", { style: U, className: m, children: /* @__PURE__ */ d("div", { style: ee, children: [
+    /* @__PURE__ */ d(
+      "svg",
+      {
+        style: { width: "48px", height: "48px", margin: "0 auto 8px", opacity: 0.5 },
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24",
+        children: [
+          /* @__PURE__ */ e(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("p", { children: "No video available" })
+  ] }) });
+};
 export {
-  n as Button
+  ye as Button,
+  xe as Form,
+  re as InputField,
+  Se as MultiStepForm,
+  we as VideoPlayer
 };