react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/chunks/CtaNewsletterSection-Cl3fLVpQ.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as e, Fragment as m, jsxs as t } from "react/jsx-runtime";
+import { useId as y, useRef as v, useEffect as N } from "react";
+function w({
+  title: i = "POWERING FORWARD-THINKING WEB PROJECTS",
+  logos: l = [
+    { name: "Vercel", symbol: "▲" },
+    { name: "Cloudflare", symbol: "☁" },
+    { name: "Supabase", symbol: "⚡" },
+    { name: "TailwindCSS", symbol: "≋" },
+    { name: "Netlify", symbol: "◈" },
+    { name: "Docker", symbol: "⚓" }
+  ]
+}) {
+  return /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e("section", { className: "logo-cloud", "data-rk-b88031": "", children: /* @__PURE__ */ t("div", { className: "logo-cloud__inner", "data-rk-b88031": "", children: [
+    /* @__PURE__ */ e("p", { className: "logo-cloud__title", "data-rk-b88031": "", children: i }),
+    /* @__PURE__ */ e("div", { className: "logo-cloud__grid", "data-rk-b88031": "", children: l.map((d, c) => /* @__PURE__ */ t("div", { className: "logo-badge", "data-rk-b88031": "", children: [
+      /* @__PURE__ */ e("span", { className: "logo-badge__symbol", "data-rk-b88031": "", children: d.symbol }),
+      /* @__PURE__ */ e("span", { className: "logo-badge__name", "data-rk-b88031": "", children: d.name })
+    ] }, c)) })
+  ] }) }) });
+}
+function x({
+  title: i = "Get new components every week",
+  subtitle: l = "One short email with fresh sections, charts and React tips. Join 12,000+ developers.",
+  perks: d = ["Weekly, never spam", "Early access to new blocks", "Unsubscribe in one click"],
+  action: c = "#",
+  buttonLabel: u = "Subscribe",
+  privacy: h = "We respect your privacy. Read our privacy policy.",
+  variant: k = "gradient",
+  size: p = "md",
+  className: _ = ""
+}) {
+  const r = `cns-${y().replace(/[^a-zA-Z0-9]/g, "")}`, o = v(!1);
+  return N(() => {
+    o.current || (o.current = !0, document.querySelectorAll(".cns__form").forEach((s) => {
+      const a = s.querySelector(".cns__input"), n = s.querySelector(".cns__msg");
+      s.addEventListener("submit", (b) => {
+        if (b.preventDefault(), !(!a || !n)) {
+          if (!a.value || !a.checkValidity()) {
+            a.setAttribute("aria-invalid", "true"), n.dataset.state = "error", n.textContent = "Please enter a valid email address.", a.focus();
+            return;
+          }
+          a.removeAttribute("aria-invalid"), n.dataset.state = "ok", n.textContent = "Thanks! Please confirm your subscription in your inbox.", a.value = "";
+        }
+      });
+    }));
+  }, []), /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e("div", { className: "cq-cta-newsletter-section-cq", "data-rk-95ed6a": "", children: /* @__PURE__ */ e("section", { className: `cns cns--${k} cns--${p} ${_}`, "aria-labelledby": r, "data-rk-95ed6a": "", children: /* @__PURE__ */ t("div", { className: "cns__box", "data-rk-95ed6a": "", children: [
+    /* @__PURE__ */ t("div", { className: "cns__copy", "data-rk-95ed6a": "", children: [
+      /* @__PURE__ */ e("span", { className: "cns__icon", "aria-hidden": "true", "data-rk-95ed6a": "", children: /* @__PURE__ */ t("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "data-rk-95ed6a": "", children: [
+        /* @__PURE__ */ e("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", "data-rk-95ed6a": "" }),
+        /* @__PURE__ */ e("path", { d: "m22 7-10 6L2 7", "data-rk-95ed6a": "" })
+      ] }) }),
+      /* @__PURE__ */ e("h2", { id: r, className: "cns__title", "data-rk-95ed6a": "", children: i }),
+      /* @__PURE__ */ e("p", { className: "cns__subtitle", "data-rk-95ed6a": "", children: l }),
+      /* @__PURE__ */ e("ul", { className: "cns__perks", "data-rk-95ed6a": "", children: d.map((s, a) => /* @__PURE__ */ t("li", { "data-rk-95ed6a": "", children: [
+        /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", "data-rk-95ed6a": "", children: /* @__PURE__ */ e("path", { d: "M20 6 9 17l-5-5", "data-rk-95ed6a": "" }) }),
+        s
+      ] }, a)) })
+    ] }),
+    /* @__PURE__ */ t("form", { className: "cns__form", action: c, method: "post", noValidate: !0, "data-rk-95ed6a": "", children: [
+      /* @__PURE__ */ e("label", { className: "cns__label", htmlFor: `${r}-email`, "data-rk-95ed6a": "", children: "Email address" }),
+      /* @__PURE__ */ t("div", { className: "cns__field", "data-rk-95ed6a": "", children: [
+        /* @__PURE__ */ e("input", { className: "cns__input", id: `${r}-email`, name: "email", type: "email", required: !0, autoComplete: "email", placeholder: "you@company.com", "aria-describedby": `${r}-msg ${r}-privacy`, "data-rk-95ed6a": "" }),
+        /* @__PURE__ */ e("button", { className: "cns__btn", type: "submit", "data-rk-95ed6a": "", children: u })
+      ] }),
+      /* @__PURE__ */ e("p", { id: `${r}-msg`, className: "cns__msg", role: "status", "aria-live": "polite", "data-rk-95ed6a": "" }),
+      /* @__PURE__ */ e("p", { id: `${r}-privacy`, className: "cns__privacy", "data-rk-95ed6a": "", children: h })
+    ] })
+  ] }) }) }) });
+}
+export {
+  x as C,
+  w as L
+};

package/dist/chunks/CustomRadioGroup-DAwliU9n.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as e, Fragment as n, jsxs as s } from "react/jsx-runtime";
+function l(...i) {
+  const r = [], t = (a) => {
+    if (a) {
+      if (typeof a == "string" || typeof a == "number") r.push(String(a));
+      else if (Array.isArray(a)) a.forEach(t);
+      else if (typeof a == "object")
+        for (const [d, o] of Object.entries(a)) o && r.push(d);
+    }
+  };
+  return i.forEach(t), r.join(" ");
+}
+function f({ label: i, name: r, options: t = [], horizontal: a = !1 }) {
+  return /* @__PURE__ */ e(n, { children: /* @__PURE__ */ s("fieldset", { className: l(["radio-group", { "radio-group--horizontal": a }]), "data-rk-01df88": "", children: [
+    i && /* @__PURE__ */ e("legend", { className: "radio-group-legend", "data-rk-01df88": "", children: i }),
+    /* @__PURE__ */ e("div", { className: "radio-items", "data-rk-01df88": "", children: t.map((d, o) => /* @__PURE__ */ s("label", { className: "radio-item", "data-rk-01df88": "", children: [
+      /* @__PURE__ */ e("input", { type: "radio", name: r, defaultValue: d.value, defaultChecked: d.checked, "data-rk-01df88": "" }),
+      /* @__PURE__ */ e("span", { className: "radio-circle", "aria-hidden": "true", "data-rk-01df88": "" }),
+      /* @__PURE__ */ e("span", { className: "radio-label", "data-rk-01df88": "", children: d.label })
+    ] }, o)) })
+  ] }) });
+}
+export {
+  f as C
+};

package/dist/chunks/DiagonalSectionDivider-CwOOEFbn.js

@@ -0,0 +1,541 @@
+"use client";
+import { jsx as a, Fragment as d, jsxs as s } from "react/jsx-runtime";
+function h(...n) {
+  const t = [], r = (e) => {
+    if (e) {
+      if (typeof e == "string" || typeof e == "number") t.push(String(e));
+      else if (Array.isArray(e)) e.forEach(r);
+      else if (typeof e == "object")
+        for (const [i, c] of Object.entries(e)) c && t.push(i);
+    }
+  };
+  return n.forEach(r), t.join(" ");
+}
+function m(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function z({
+  maxWidth: n = "1200px",
+  padding: t = "1.5rem",
+  className: r = "",
+  children: e
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: "cq-centered-container-cq", "data-rk-7481a0": "", children: /* @__PURE__ */ a("div", { className: h(["centered-container", r]), style: m(`--container-max: ${n}; --container-pad: ${t}`), "data-rk-7481a0": "", children: e }) }) });
+}
+function p(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function G({
+  minWidth: n = "300px",
+  gap: t = "2rem",
+  className: r = "",
+  children: e
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: `card-grid ${r}`, style: p(`--min-width: ${n}; --gap: ${t};`), "data-rk-bc83a7": "", children: e }) });
+}
+function U({
+  className: n = "",
+  left: t,
+  right: r
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ s("div", { className: `split-layout ${n}`, "data-rk-aa2173": "", children: [
+    /* @__PURE__ */ a("div", { className: "split-side left", "data-rk-aa2173": "", children: t ?? /* @__PURE__ */ a(d, { children: /* @__PURE__ */ s("div", { className: "demo-split-block", "data-rk-aa2173": "", children: [
+      /* @__PURE__ */ a("h3", { "data-rk-aa2173": "", children: "Left Content" }),
+      /* @__PURE__ */ a("p", { "data-rk-aa2173": "", children: "Hero text and main value proposition." })
+    ] }) }) }),
+    /* @__PURE__ */ a("div", { className: "split-side right", "data-rk-aa2173": "", children: r ?? /* @__PURE__ */ a(d, { children: /* @__PURE__ */ s("div", { className: "demo-split-block", "data-rk-aa2173": "", children: [
+      /* @__PURE__ */ a("h3", { "data-rk-aa2173": "", children: "Right Content" }),
+      /* @__PURE__ */ a("p", { "data-rk-aa2173": "", children: "Visual graphic, product mockups, or form." })
+    ] }) }) })
+  ] }) });
+}
+function u(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function B({
+  columns: n = 3,
+  gap: t = "1.5rem",
+  className: r = "",
+  children: e
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: `masonry ${r}`, style: u(`--cols: ${n}; --gap: ${t};`), "data-rk-741442": "", children: e ?? /* @__PURE__ */ s(d, { children: [
+    /* @__PURE__ */ a("div", { className: "masonry-demo-item", style: { height: "120px" }, "data-rk-741442": "", children: "Item 1 (Small)" }),
+    /* @__PURE__ */ a("div", { className: "masonry-demo-item", style: { height: "200px" }, "data-rk-741442": "", children: "Item 2 (Tall)" }),
+    /* @__PURE__ */ a("div", { className: "masonry-demo-item", style: { height: "160px" }, "data-rk-741442": "", children: "Item 3 (Medium)" }),
+    /* @__PURE__ */ a("div", { className: "masonry-demo-item", style: { height: "140px" }, "data-rk-741442": "", children: "Item 4 (Medium)" }),
+    /* @__PURE__ */ a("div", { className: "masonry-demo-item", style: { height: "180px" }, "data-rk-741442": "", children: "Item 5 (Tall)" }),
+    /* @__PURE__ */ a("div", { className: "masonry-demo-item", style: { height: "110px" }, "data-rk-741442": "", children: "Item 6 (Small)" })
+  ] }) }) });
+}
+function k(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function F({
+  color: n = "var(--c-text-3)",
+  fontSize: t = "0.75rem",
+  children: r
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: "section-divider", style: k(`--divider-color: ${n}; --divider-font-size: ${t}`), "data-rk-48ae98": "", children: /* @__PURE__ */ a("span", { "data-rk-48ae98": "", children: r }) }) });
+}
+function g(...n) {
+  const t = [], r = (e) => {
+    if (e) {
+      if (typeof e == "string" || typeof e == "number") t.push(String(e));
+      else if (Array.isArray(e)) e.forEach(r);
+      else if (typeof e == "object")
+        for (const [i, c] of Object.entries(e)) c && t.push(i);
+    }
+  };
+  return n.forEach(r), t.join(" ");
+}
+function b(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function I({
+  title: n = "Experience the Next Dimension of Design",
+  subtitle: t = "Build stunning interfaces faster than ever with our premium component ecosystem.",
+  gradientFrom: r = "rgba(99,102,241,0.15)",
+  gradientTo: e = "transparent",
+  className: i = "",
+  children: c
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: "cq-feature-hero-cq", "data-rk-4c81ec": "", children: /* @__PURE__ */ s("section", { className: g(["feature-hero", i]), "data-rk-4c81ec": "", children: [
+    /* @__PURE__ */ a("div", { className: "feature-hero__bg", "aria-hidden": "true", "data-rk-4c81ec": "", children: /* @__PURE__ */ a("div", { className: "feature-hero__gradient", style: b(`--gradient-from: ${r}; --gradient-to: ${e}`), "data-rk-4c81ec": "" }) }),
+    /* @__PURE__ */ a("div", { className: "feature-hero__overlay", "aria-hidden": "true", "data-rk-4c81ec": "" }),
+    /* @__PURE__ */ s("div", { className: "feature-hero__inner", "data-rk-4c81ec": "", children: [
+      /* @__PURE__ */ a("h1", { className: "feature-hero__title", "data-rk-4c81ec": "", children: n }),
+      /* @__PURE__ */ a("p", { className: "feature-hero__subtitle", "data-rk-4c81ec": "", children: t }),
+      /* @__PURE__ */ a("div", { className: "feature-hero__actions", "data-rk-4c81ec": "", children: c })
+    ] })
+  ] }) }) });
+}
+function y(...n) {
+  const t = [], r = (e) => {
+    if (e) {
+      if (typeof e == "string" || typeof e == "number") t.push(String(e));
+      else if (Array.isArray(e)) e.forEach(r);
+      else if (typeof e == "object")
+        for (const [i, c] of Object.entries(e)) c && t.push(i);
+    }
+  };
+  return n.forEach(r), t.join(" ");
+}
+function N(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function D({
+  gap: n = "1.5rem",
+  className: t = "",
+  children: r
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: y(["vertical-stack", t]), style: N(`--stack-gap: ${n}`), "data-rk-5bc495": "", children: r }) });
+}
+function _(...n) {
+  const t = [], r = (e) => {
+    if (e) {
+      if (typeof e == "string" || typeof e == "number") t.push(String(e));
+      else if (Array.isArray(e)) e.forEach(r);
+      else if (typeof e == "object")
+        for (const [i, c] of Object.entries(e)) c && t.push(i);
+    }
+  };
+  return n.forEach(r), t.join(" ");
+}
+function $(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function L({
+  sidebarWidth: n = "280px",
+  breakpoint: t = "768px",
+  className: r = "",
+  sidebar: e,
+  main: i
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: "cq-sidebar-layout-wrapper-cq", "data-rk-8aeea2": "", children: /* @__PURE__ */ s("div", { className: _(["sidebar-layout", r]), style: $(`--sidebar-w: ${n}; --breakpoint: ${t}`), "data-rk-8aeea2": "", children: [
+    /* @__PURE__ */ a("aside", { className: "sidebar-layout__sidebar", "data-rk-8aeea2": "", children: e }),
+    /* @__PURE__ */ a("main", { className: "sidebar-layout__main", "data-rk-8aeea2": "", children: i })
+  ] }) }) });
+}
+function T({
+  className: n = "",
+  slot1: t,
+  slot2: r,
+  slot3: e,
+  slot4: i
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: "cq-bento-grid3-cq", "data-rk-356029": "", children: /* @__PURE__ */ s("div", { className: `bento ${n}`, "data-rk-356029": "", children: [
+    /* @__PURE__ */ a("div", { className: "item wide", "data-rk-356029": "", children: t ?? /* @__PURE__ */ s(d, { children: [
+      /* @__PURE__ */ a("h4", { "data-rk-356029": "", children: "Main Highlight" }),
+      /* @__PURE__ */ a("p", { "data-rk-356029": "", children: "Wide key feature metric or banner" })
+    ] }) }),
+    /* @__PURE__ */ a("div", { className: "item", "data-rk-356029": "", children: r ?? /* @__PURE__ */ s(d, { children: [
+      /* @__PURE__ */ a("h4", { "data-rk-356029": "", children: "Stat Widget" }),
+      /* @__PURE__ */ a("p", { "data-rk-356029": "", children: "Quick KPI" })
+    ] }) }),
+    /* @__PURE__ */ a("div", { className: "item", "data-rk-356029": "", children: e ?? /* @__PURE__ */ s(d, { children: [
+      /* @__PURE__ */ a("h4", { "data-rk-356029": "", children: "Live Feed" }),
+      /* @__PURE__ */ a("p", { "data-rk-356029": "", children: "Real-time status" })
+    ] }) }),
+    /* @__PURE__ */ a("div", { className: "item tall", "data-rk-356029": "", children: i ?? /* @__PURE__ */ s(d, { children: [
+      /* @__PURE__ */ a("h4", { "data-rk-356029": "", children: "Analytics" }),
+      /* @__PURE__ */ a("p", { "data-rk-356029": "", children: "Vertical trend tracker" })
+    ] }) })
+  ] }) }) });
+}
+function x(...n) {
+  const t = [], r = (e) => {
+    if (e) {
+      if (typeof e == "string" || typeof e == "number") t.push(String(e));
+      else if (Array.isArray(e)) e.forEach(r);
+      else if (typeof e == "object")
+        for (const [i, c] of Object.entries(e)) c && t.push(i);
+    }
+  };
+  return n.forEach(r), t.join(" ");
+}
+function H({ title: n, subtitle: t = "", align: r = "left", className: e = "" }) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ s("div", { className: x(["glass-section-header", { "is-centered": r === "center" }, e]), "data-rk-7395fc": "", children: [
+    /* @__PURE__ */ a("h2", { className: "glass-section-header__title", "data-rk-7395fc": "", children: n }),
+    t && /* @__PURE__ */ a("p", { className: "glass-section-header__subtitle", "data-rk-7395fc": "", children: t }),
+    /* @__PURE__ */ a("div", { className: "glass-section-header__line", "aria-hidden": "true", "data-rk-7395fc": "" })
+  ] }) });
+}
+function P({
+  className: n = "",
+  children: t
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("section", { className: `full-bleed ${n}`, "data-rk-4e57ad": "", children: /* @__PURE__ */ a("div", { className: "full-bleed-inner", "data-rk-4e57ad": "", children: t ?? /* @__PURE__ */ s(d, { children: [
+    /* @__PURE__ */ a("h3", { "data-rk-4e57ad": "", children: "Full Bleed Background Container" }),
+    /* @__PURE__ */ a("p", { "data-rk-4e57ad": "", children: "Content breaks out to full viewport edges while inner content stays readable." })
+  ] }) }) }) });
+}
+function M({ brandName: n = "ReactKit", className: t = "" }) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("footer", { className: `m-footer ${t}`, "data-rk-f90449": "", children: /* @__PURE__ */ s("div", { className: "f-row", "data-rk-f90449": "", children: [
+    /* @__PURE__ */ s("div", { className: "f-info", "data-rk-f90449": "", children: [
+      /* @__PURE__ */ a("span", { className: "f-brand", "data-rk-f90449": "", children: n }),
+      /* @__PURE__ */ s("span", { className: "f-copy", "data-rk-f90449": "", children: [
+        "© ",
+        (/* @__PURE__ */ new Date()).getFullYear(),
+        " All rights reserved."
+      ] })
+    ] }),
+    /* @__PURE__ */ s("div", { className: "f-links", "data-rk-f90449": "", children: [
+      /* @__PURE__ */ s("div", { className: "f-col", "data-rk-f90449": "", children: [
+        /* @__PURE__ */ a("span", { className: "f-col-title", "data-rk-f90449": "", children: "Product" }),
+        /* @__PURE__ */ a("a", { href: "#components", "data-rk-f90449": "", children: "Components" }),
+        /* @__PURE__ */ a("a", { href: "#docs", "data-rk-f90449": "", children: "Documentation" }),
+        /* @__PURE__ */ a("a", { href: "#pricing", "data-rk-f90449": "", children: "Pricing" })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "f-col", "data-rk-f90449": "", children: [
+        /* @__PURE__ */ a("span", { className: "f-col-title", "data-rk-f90449": "", children: "Community" }),
+        /* @__PURE__ */ a("a", { href: "https://github.com", target: "_blank", rel: "noopener", "data-rk-f90449": "", children: "GitHub" }),
+        /* @__PURE__ */ a("a", { href: "https://discord.com", target: "_blank", rel: "noopener", "data-rk-f90449": "", children: "Discord" }),
+        /* @__PURE__ */ a("a", { href: "https://x.com", target: "_blank", rel: "noopener", "data-rk-f90449": "", children: "Twitter" })
+      ] })
+    ] })
+  ] }) }) });
+}
+function S(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function R({
+  height: n = "300px",
+  className: t = "",
+  children: r
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: `snap-wrap ${t}`, style: S(`--snap-height: ${n};`), "data-rk-109259": "", children: r ?? /* @__PURE__ */ s(d, { children: [
+    /* @__PURE__ */ a("section", { className: "snap-panel panel-1", "data-rk-109259": "", children: /* @__PURE__ */ a("h4", { "data-rk-109259": "", children: "Slide 1 (Scroll to snap)" }) }),
+    /* @__PURE__ */ a("section", { className: "snap-panel panel-2", "data-rk-109259": "", children: /* @__PURE__ */ a("h4", { "data-rk-109259": "", children: "Slide 2" }) }),
+    /* @__PURE__ */ a("section", { className: "snap-panel panel-3", "data-rk-109259": "", children: /* @__PURE__ */ a("h4", { "data-rk-109259": "", children: "Slide 3" }) })
+  ] }) }) });
+}
+function v(...n) {
+  const t = [], r = (e) => {
+    if (e) {
+      if (typeof e == "string" || typeof e == "number") t.push(String(e));
+      else if (Array.isArray(e)) e.forEach(r);
+      else if (typeof e == "object")
+        for (const [i, c] of Object.entries(e)) c && t.push(i);
+    }
+  };
+  return n.forEach(r), t.join(" ");
+}
+function j(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function V({
+  sidebarWidth: n = "280px",
+  stickyTop: t = "100px",
+  gap: r = "2rem",
+  className: e = "",
+  main: i,
+  sidebar: c
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: "cq-sticky-sidebar-wrapper-cq", "data-rk-0549ef": "", children: /* @__PURE__ */ s("div", { className: v(["sticky-sidebar", e]), style: j(`--sidebar-w: ${n}; --sticky-top: ${t}; --col-gap: ${r}`), "data-rk-0549ef": "", children: [
+    /* @__PURE__ */ a("main", { className: "sticky-sidebar__main", "data-rk-0549ef": "", children: i }),
+    /* @__PURE__ */ a("aside", { className: "sticky-sidebar__aside", "data-rk-0549ef": "", children: /* @__PURE__ */ a("div", { className: "sticky-sidebar__inner", "data-rk-0549ef": "", children: c }) })
+  ] }) }) });
+}
+function C(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function K({
+  gap: n = "0.75rem",
+  align: t = "center",
+  className: r = "",
+  children: e
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: `cluster ${r}`, style: C(`--gap: ${n}; --align: ${t};`), "data-rk-fff909": "", children: e ?? /* @__PURE__ */ s(d, { children: [
+    /* @__PURE__ */ a("span", { className: "cluster-tag", "data-rk-fff909": "", children: "Tag 1" }),
+    /* @__PURE__ */ a("span", { className: "cluster-tag", "data-rk-fff909": "", children: "Tag 2" }),
+    /* @__PURE__ */ a("span", { className: "cluster-tag", "data-rk-fff909": "", children: "Tag 3" }),
+    /* @__PURE__ */ a("span", { className: "cluster-tag", "data-rk-fff909": "", children: "Tag 4" }),
+    /* @__PURE__ */ a("span", { className: "cluster-tag", "data-rk-fff909": "", children: "Tag 5" })
+  ] }) }) });
+}
+function Q({
+  className: n = "",
+  children: t
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: `abs-center-container ${n}`, "data-rk-bc4cce": "", children: /* @__PURE__ */ a("div", { className: "abs-center", "data-rk-bc4cce": "", children: t ?? /* @__PURE__ */ a(d, { children: /* @__PURE__ */ s("div", { className: "abs-card", "data-rk-bc4cce": "", children: [
+    /* @__PURE__ */ a("h4", { "data-rk-bc4cce": "", children: "Centered Content" }),
+    /* @__PURE__ */ a("p", { "data-rk-bc4cce": "", children: "Centered cleanly in viewport or parent container." })
+  ] }) }) }) }) });
+}
+function Y({
+  className: n = "",
+  children: t
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: `gal-grid ${n}`, "data-rk-fb6612": "", children: t ?? /* @__PURE__ */ s(d, { children: [
+    /* @__PURE__ */ a("div", { className: "gal-item", "data-rk-fb6612": "", children: /* @__PURE__ */ a("span", { "data-rk-fb6612": "", children: "Photo 1" }) }),
+    /* @__PURE__ */ a("div", { className: "gal-item", "data-rk-fb6612": "", children: /* @__PURE__ */ a("span", { "data-rk-fb6612": "", children: "Photo 2" }) }),
+    /* @__PURE__ */ a("div", { className: "gal-item", "data-rk-fb6612": "", children: /* @__PURE__ */ a("span", { "data-rk-fb6612": "", children: "Photo 3" }) }),
+    /* @__PURE__ */ a("div", { className: "gal-item", "data-rk-fb6612": "", children: /* @__PURE__ */ a("span", { "data-rk-fb6612": "", children: "Photo 4" }) })
+  ] }) }) });
+}
+function J({ className: n = "" }) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ s("div", { className: `step-lay ${n}`, "data-rk-3280db": "", children: [
+    /* @__PURE__ */ s("div", { className: "step-line", "data-rk-3280db": "", children: [
+      /* @__PURE__ */ a("div", { className: "step-point", "data-rk-3280db": "", children: "1" }),
+      /* @__PURE__ */ a("div", { className: "step-point", "data-rk-3280db": "", children: "2" }),
+      /* @__PURE__ */ a("div", { className: "step-point", "data-rk-3280db": "", children: "3" })
+    ] }),
+    /* @__PURE__ */ s("div", { className: "step-content", "data-rk-3280db": "", children: [
+      /* @__PURE__ */ s("div", { className: "step-block", "data-rk-3280db": "", children: [
+        /* @__PURE__ */ a("h4", { "data-rk-3280db": "", children: "1. Installation" }),
+        /* @__PURE__ */ a("p", { "data-rk-3280db": "", children: "Install react-component-kit-ui via npm in seconds." })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "step-block", "data-rk-3280db": "", children: [
+        /* @__PURE__ */ a("h4", { "data-rk-3280db": "", children: "2. Configuration" }),
+        /* @__PURE__ */ a("p", { "data-rk-3280db": "", children: "Import components and design tokens into your React project." })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "step-block", "data-rk-3280db": "", children: [
+        /* @__PURE__ */ a("h4", { "data-rk-3280db": "", children: "3. Build & Ship" }),
+        /* @__PURE__ */ a("p", { "data-rk-3280db": "", children: "Enjoy zero-runtime overhead and instant static builds." })
+      ] })
+    ] })
+  ] }) });
+}
+function X({
+  title: n = "Build Faster with React",
+  subtitle: t = "Scale with pre-built accessible components and modular designs.",
+  className: r = "",
+  actions: e,
+  media: i
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: "cq-landing-section-split-cq", "data-rk-4cb82a": "", children: /* @__PURE__ */ s("section", { className: `split-sec ${r}`, "data-rk-4cb82a": "", children: [
+    /* @__PURE__ */ s("div", { className: "split-sec-text", "data-rk-4cb82a": "", children: [
+      /* @__PURE__ */ a("h2", { "data-rk-4cb82a": "", children: n }),
+      /* @__PURE__ */ a("p", { "data-rk-4cb82a": "", children: t }),
+      /* @__PURE__ */ a("div", { className: "split-sec-actions", "data-rk-4cb82a": "", children: e ?? /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("button", { className: "split-demo-btn", "data-rk-4cb82a": "", children: "Explore Docs" }) }) })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "split-sec-media", "data-rk-4cb82a": "", children: i ?? /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: "media-mockup", "data-rk-4cb82a": "", children: /* @__PURE__ */ a("span", { "data-rk-4cb82a": "", children: "⚡ Interactive Preview" }) }) }) })
+  ] }) }) });
+}
+function w(...n) {
+  const t = [], r = (e) => {
+    if (e) {
+      if (typeof e == "string" || typeof e == "number") t.push(String(e));
+      else if (Array.isArray(e)) e.forEach(r);
+      else if (typeof e == "object")
+        for (const [i, c] of Object.entries(e)) c && t.push(i);
+    }
+  };
+  return n.forEach(r), t.join(" ");
+}
+function Z({
+  copyright: n = "© 2026 Built with React Components Kit.",
+  className: t = "",
+  logo: r
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: "cq-footer-centered-minimal-cq", "data-rk-2106dc": "", children: /* @__PURE__ */ a("footer", { className: w(["footer-centered", t]), "data-rk-2106dc": "", children: /* @__PURE__ */ s("div", { className: "footer-centered__inner", "data-rk-2106dc": "", children: [
+    /* @__PURE__ */ a("div", { className: "footer-centered__logo", "data-rk-2106dc": "", children: r }),
+    /* @__PURE__ */ a("p", { className: "footer-centered__copy", "data-rk-2106dc": "", children: n })
+  ] }) }) }) });
+}
+function A(...n) {
+  const t = [], r = (e) => {
+    if (e) {
+      if (typeof e == "string" || typeof e == "number") t.push(String(e));
+      else if (Array.isArray(e)) e.forEach(r);
+      else if (typeof e == "object")
+        for (const [i, c] of Object.entries(e)) c && t.push(i);
+    }
+  };
+  return n.forEach(r), t.join(" ");
+}
+function E(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function ee({
+  leftWidth: n = "240px",
+  rightWidth: t = "220px",
+  gap: r = "1.5rem",
+  className: e = "",
+  children: i,
+  header: c,
+  left: l,
+  right: o,
+  footer: f
+}) {
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: "cq-holy-grail-grid-cq", "data-rk-7590db": "", children: /* @__PURE__ */ s("div", { className: A(["holy-grail", e]), style: E(`--hg-left: ${n}; --hg-right: ${t}; --hg-gap: ${r};`), "data-rk-7590db": "", children: [
+    /* @__PURE__ */ a("header", { className: "holy-grail__header", "data-rk-7590db": "", children: c }),
+    /* @__PURE__ */ s("div", { className: "holy-grail__middle", "data-rk-7590db": "", children: [
+      /* @__PURE__ */ a("aside", { className: "holy-grail__left", "data-rk-7590db": "", children: l }),
+      /* @__PURE__ */ a("main", { className: "holy-grail__main", "data-rk-7590db": "", children: i }),
+      /* @__PURE__ */ a("aside", { className: "holy-grail__right", "data-rk-7590db": "", children: o })
+    ] }),
+    /* @__PURE__ */ a("footer", { className: "holy-grail__footer", "data-rk-7590db": "", children: f })
+  ] }) }) });
+}
+function O(...n) {
+  const t = [], r = (e) => {
+    if (e) {
+      if (typeof e == "string" || typeof e == "number") t.push(String(e));
+      else if (Array.isArray(e)) e.forEach(r);
+      else if (typeof e == "object")
+        for (const [i, c] of Object.entries(e)) c && t.push(i);
+    }
+  };
+  return n.forEach(r), t.join(" ");
+}
+function q(n) {
+  const t = {};
+  for (const r of String(n ?? "").split(";")) {
+    const e = r.indexOf(":");
+    if (e < 0) continue;
+    const i = r.slice(0, e).trim();
+    i && (t[i.startsWith("--") ? i : i.replace(/-([a-z])/g, (c, l) => l.toUpperCase())] = r.slice(e + 1).trim());
+  }
+  return t;
+}
+function ae({
+  position: n = "bottom",
+  direction: t = "left-to-right",
+  height: r = "60px",
+  fillColor: e = "#050505"
+}) {
+  const c = t === "left-to-right" ? n === "bottom" ? "0,100 100,0 100,100" : "0,0 100,0 100,100" : n === "bottom" ? "0,0 0,100 100,100" : "0,0 100,0 0,100";
+  return /* @__PURE__ */ a(d, { children: /* @__PURE__ */ a("div", { className: O(["diagonal-divider", `diagonal-divider--${n}`]), style: q(`--div-height: ${r}; --div-color: ${e};`), "aria-hidden": "true", "data-rk-9b90ea": "", children: /* @__PURE__ */ a("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "diagonal-divider__svg", "data-rk-9b90ea": "", children: /* @__PURE__ */ a("polygon", { points: c, fill: e, "data-rk-9b90ea": "" }) }) }) });
+}
+export {
+  T as B,
+  Q as C,
+  ae as D,
+  I as F,
+  Y as G,
+  ee as H,
+  X as L,
+  B as M,
+  R as S,
+  D as V,
+  z as a,
+  K as b,
+  Z as c,
+  P as d,
+  G as e,
+  H as f,
+  M as g,
+  F as h,
+  L as i,
+  U as j,
+  J as k,
+  V as l
+};