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

package/dist/chunks/TypingIndicator-DshBNXhx.js

@@ -0,0 +1,373 @@
+"use client";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { useRef as g, useEffect as N, useState as v } from "react";
+function B({
+  percent: t,
+  size: e = 80,
+  color: s = "var(--c-primary, #6366f1)",
+  label: r = "Progress",
+  className: i,
+  style: l,
+  ...c
+}) {
+  const d = Math.min(100, Math.max(0, t)), h = e / 2 - 10, m = 2 * Math.PI * h, o = m - d / 100 * m;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ...c,
+      role: "progressbar",
+      "aria-valuenow": d,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": r,
+      className: ["circle-box", i].filter(Boolean).join(" "),
+      style: { "--gauge-size": `${e}px`, "--gauge-color": s, ...l },
+      children: [
+        /* @__PURE__ */ n("svg", { width: e, height: e, "aria-hidden": "true", children: [
+          /* @__PURE__ */ a("circle", { className: "circle-bg", cx: e / 2, cy: e / 2, r: h }),
+          /* @__PURE__ */ a("circle", { className: "circle-val", cx: e / 2, cy: e / 2, r: h, strokeDasharray: m, strokeDashoffset: o, stroke: s })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "circle-label", "aria-hidden": "true", children: [
+          t,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+const p = (t) => {
+  const e = Math.sin(t * 9301 + 49297) * 233280;
+  return e - Math.floor(e);
+};
+function M({
+  label: t = "Success!",
+  color: e = "var(--c-primary, #6366f1)",
+  active: s = !0,
+  pieces: r = 12,
+  className: i,
+  ...l
+}) {
+  return /* @__PURE__ */ n("div", { ...l, className: ["confetti-trigger", s && "confetti-trigger--active", i].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ a("span", { className: "confetti-label", children: t }),
+    /* @__PURE__ */ a("div", { className: "confetti-container", "aria-hidden": "true", style: { "--confetti-color": e }, children: Array.from({ length: r }, (c, d) => /* @__PURE__ */ a(
+      "div",
+      {
+        className: "confetti-piece",
+        style: {
+          "--l": `${p(d + 1) * 100}%`,
+          "--d": `${p(d + 101) * 2}s`,
+          "--r": `${p(d + 201) * 360}deg`,
+          "--s": 0.5 + p(d + 301)
+        }
+      },
+      d
+    )) })
+  ] });
+}
+function S({ message: t = "CRITICAL ERROR", accentColor: e = "#00e0ff", className: s, style: r, ...i }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: "alert",
+      ...i,
+      className: ["glitch-alert", s].filter(Boolean).join(" "),
+      style: { "--glitch-accent": e, ...r },
+      children: /* @__PURE__ */ a("span", { className: "glitch-text", "data-text": t, children: t })
+    }
+  );
+}
+function $({
+  icon: t = "📁",
+  title: e = "No results found",
+  message: s = "Try adjusting your filters or adding a new item.",
+  ctaLabel: r,
+  onCtaClick: i,
+  className: l,
+  ...c
+}) {
+  return /* @__PURE__ */ n("div", { ...c, className: ["empty-state", l].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ a("div", { className: "empty-state__icon", "aria-hidden": "true", children: t }),
+    /* @__PURE__ */ a("h4", { className: "empty-state__title", children: e }),
+    /* @__PURE__ */ a("p", { className: "empty-state__message", children: s }),
+    r && /* @__PURE__ */ a("button", { className: "empty-state__btn", type: "button", onClick: i, children: r })
+  ] });
+}
+const _ = { info: "i", success: "✓", warning: "!", error: "✕" };
+function P({ type: t = "info", title: e, className: s, children: r, ...i }) {
+  return /* @__PURE__ */ n("div", { role: "alert", ...i, className: ["glass-alert", `glass-alert--${t}`, s].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ a("div", { className: "glass-alert__icon", "aria-hidden": "true", children: _[t] }),
+    /* @__PURE__ */ n("div", { className: "glass-alert__content", children: [
+      /* @__PURE__ */ a("div", { className: "glass-alert__title", children: e }),
+      /* @__PURE__ */ a("div", { className: "glass-alert__body", children: r })
+    ] })
+  ] });
+}
+function R({
+  open: t,
+  onClose: e,
+  onConfirm: s,
+  title: r = "Confirm Action",
+  confirmLabel: i = "Confirm",
+  cancelLabel: l = "Cancel",
+  className: c,
+  children: d,
+  ...h
+}) {
+  const m = g(null);
+  return N(() => {
+    const o = m.current;
+    o && (t && !o.open && o.showModal(), !t && o.open && o.close());
+  }, [t]), /* @__PURE__ */ a(
+    "dialog",
+    {
+      ...h,
+      ref: m,
+      className: ["modal-dialog", c].filter(Boolean).join(" "),
+      onClose: () => e == null ? void 0 : e(),
+      onClick: (o) => {
+        o.target === o.currentTarget && (e == null || e());
+      },
+      children: /* @__PURE__ */ n("div", { className: "modal-box", children: [
+        /* @__PURE__ */ a("div", { className: "modal-header", children: /* @__PURE__ */ a("h3", { children: r }) }),
+        /* @__PURE__ */ a("div", { className: "modal-body", children: d }),
+        /* @__PURE__ */ n("div", { className: "modal-footer", children: [
+          /* @__PURE__ */ a("button", { className: "modal-btn modal-btn--sec", type: "button", onClick: () => e == null ? void 0 : e(), children: l }),
+          /* @__PURE__ */ a("button", { className: "modal-btn modal-btn--pri", type: "button", onClick: () => s == null ? void 0 : s(), children: i })
+        ] })
+      ] })
+    }
+  );
+}
+function T({ value: t, label: e = "Progress bar", className: s, ...r }) {
+  const i = Math.min(100, Math.max(0, t));
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...r,
+      className: ["progress-container", s].filter(Boolean).join(" "),
+      role: "progressbar",
+      "aria-valuenow": i,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": e,
+      children: /* @__PURE__ */ a("div", { className: "progress-fill", style: { width: `${i}%` } })
+    }
+  );
+}
+const b = {
+  "top-right": { top: 0, right: 0, transform: "translate(25%, -25%)" },
+  "top-left": { top: 0, left: 0, transform: "translate(-25%, -25%)" },
+  "bottom-right": { bottom: 0, right: 0, transform: "translate(25%, 25%)" },
+  "bottom-left": { bottom: 0, left: 0, transform: "translate(-25%, 25%)" }
+};
+function E({
+  color: t = "var(--c-primary, #6366f1)",
+  position: e = "top-right",
+  pulse: s = !1,
+  className: r,
+  children: i,
+  ...l
+}) {
+  return /* @__PURE__ */ n("div", { ...l, className: ["indicator-wrap", r].filter(Boolean).join(" "), children: [
+    i,
+    /* @__PURE__ */ a(
+      "span",
+      {
+        className: ["dot-indicator", s && "dot-indicator--pulse"].filter(Boolean).join(" "),
+        style: { background: t, ...b[e] },
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+const y = { sm: "24px", md: "40px", lg: "64px" };
+function G({ color: t = "var(--c-primary, #6366f1)", size: e = "md", label: s = "Loading", className: r, style: i, ...l }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      role: "status",
+      "aria-label": s,
+      ...l,
+      className: ["neon-spinner", r].filter(Boolean).join(" "),
+      style: { "--spinner-color": t, "--spinner-size": y[e], ...i }
+    }
+  );
+}
+function A({
+  value: t = 75,
+  max: e = 100,
+  size: s = 96,
+  strokeWidth: r = 6,
+  color: i = "#d4a017",
+  label: l = "COMPLETED",
+  className: c,
+  style: d,
+  ...h
+}) {
+  const m = (s - r) / 2, o = 2 * Math.PI * m, u = Math.min(100, Math.max(0, t / e * 100)), f = o - u / 100 * o;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": t,
+      "aria-valuemin": 0,
+      "aria-valuemax": e,
+      "aria-label": l || void 0,
+      ...h,
+      className: ["ring-counter", c].filter(Boolean).join(" "),
+      style: { "--ring-size": `${s}px`, "--ring-color": i, ...d },
+      children: [
+        /* @__PURE__ */ n("svg", { width: s, height: s, className: "ring-counter__svg", "aria-hidden": "true", children: [
+          /* @__PURE__ */ a("circle", { className: "ring-counter__bg", cx: s / 2, cy: s / 2, r: m, strokeWidth: r }),
+          /* @__PURE__ */ a(
+            "circle",
+            {
+              className: "ring-counter__meter",
+              cx: s / 2,
+              cy: s / 2,
+              r: m,
+              strokeWidth: r,
+              strokeDasharray: o,
+              strokeDashoffset: f
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("div", { className: "ring-counter__center", children: [
+          /* @__PURE__ */ n("span", { className: "val", children: [
+            Math.round(u),
+            "%"
+          ] }),
+          l && /* @__PURE__ */ a("span", { className: "lbl", children: l })
+        ] })
+      ]
+    }
+  );
+}
+function D({ label: t, color: e = "#34d399", className: s, style: r, ...i }) {
+  return /* @__PURE__ */ n("div", { ...i, className: ["status-wrap", s].filter(Boolean).join(" "), style: { "--status-color": e, ...r }, children: [
+    /* @__PURE__ */ a("div", { className: "pulse-dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ a("span", { className: "status-text", children: t })
+  ] });
+}
+function F({ score: t, showStar: e = !0, className: s, ...r }) {
+  const i = t >= 4 ? "high" : t >= 3 ? "mid" : "low";
+  return /* @__PURE__ */ n("div", { "aria-label": `Rating ${t.toFixed(1)}`, ...r, className: ["rate-pill", `rate-pill--${i}`, s].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ a("span", { className: "rate-pill__val", children: t.toFixed(1) }),
+    e && /* @__PURE__ */ a("span", { className: "rate-pill__star", "aria-hidden": "true", children: "★" })
+  ] });
+}
+function I({ message: t, active: e = !1, icon: s = "⚠️", className: r, ...i }) {
+  return /* @__PURE__ */ n("div", { role: "alert", ...i, className: ["shake-box", e && "shake-box--active", r].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ a("span", { className: "shake-box__icon", "aria-hidden": "true", children: s }),
+    /* @__PURE__ */ a("span", { className: "shake-box__msg", children: t })
+  ] });
+}
+function L({ text: t, position: e = "top", className: s, children: r, ...i }) {
+  return /* @__PURE__ */ a("div", { ...i, className: ["tooltip-wrap", `tooltip-wrap--${e}`, s].filter(Boolean).join(" "), "data-tip": t, children: r });
+}
+function C({ count: t = 3, className: e, ...s }) {
+  return /* @__PURE__ */ a("div", { "aria-hidden": "true", ...s, className: ["skeleton-list", e].filter(Boolean).join(" "), children: Array.from({ length: t }, (r, i) => /* @__PURE__ */ n("div", { className: "skeleton-item", children: [
+    /* @__PURE__ */ a("div", { className: "skeleton-avatar" }),
+    /* @__PURE__ */ n("div", { className: "skeleton-content", children: [
+      /* @__PURE__ */ a("div", { className: "skeleton-line skeleton-line--title" }),
+      /* @__PURE__ */ a("div", { className: "skeleton-line skeleton-line--body" })
+    ] })
+  ] }, i)) });
+}
+function O({ active: t = !1, opacity: e = 0.7, className: s, style: r, children: i, ...l }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...l,
+      className: ["spotlight-wrap", t && "spotlight-wrap--active", s].filter(Boolean).join(" "),
+      style: { "--spotlight-opacity": e, ...r },
+      children: /* @__PURE__ */ a("div", { className: "spotlight-content", children: i })
+    }
+  );
+}
+const j = [{ label: "Details" }, { label: "Payment" }, { label: "Finish" }];
+function Y({ steps: t = j, activeIndex: e = 0, className: s, ...r }) {
+  const i = t.length > 1 ? e / (t.length - 1) * 100 : 0;
+  return /* @__PURE__ */ n("div", { ...r, className: ["steps-container", s].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ a("div", { className: "steps-line", "aria-hidden": "true", style: { "--progress": `${i}%` } }),
+    /* @__PURE__ */ a("ol", { className: "steps-list", children: t.map((l, c) => /* @__PURE__ */ n(
+      "li",
+      {
+        className: ["step-item", c === e && "step-item--active", c < e && "step-item--complete"].filter(Boolean).join(" "),
+        "aria-current": c === e ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ a("div", { className: "step-circle", children: c + 1 }),
+          /* @__PURE__ */ a("span", { className: "step-label", children: l.label })
+        ]
+      },
+      l.label + c
+    )) })
+  ] });
+}
+function U({ message: t, icon: e = "✅", variant: s = "success", show: r = !0, className: i, ...l }) {
+  return /* @__PURE__ */ n("div", { role: "status", ...l, className: ["toast", `toast--${s}`, r && "toast--show", i].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ a("div", { className: "toast__icon", "aria-hidden": "true", children: e }),
+    /* @__PURE__ */ a("span", { className: "toast__msg", children: t })
+  ] });
+}
+const k = { success: "✓", warning: "!", error: "✕", info: "ℹ" };
+function q({
+  type: t = "success",
+  title: e = "Changes Saved",
+  message: s = "Your project settings were synchronized with production.",
+  actionText: r = "Undo",
+  onAction: i,
+  onDismiss: l,
+  className: c,
+  style: d,
+  ...h
+}) {
+  const [m, o] = v("shown");
+  if (m === "gone") return null;
+  const u = () => {
+    o("leaving"), window.setTimeout(() => {
+      o("gone"), l == null || l();
+    }, 250);
+  }, f = m === "leaving" ? { opacity: 0, transform: "translateY(10px) scale(0.95)" } : {};
+  return /* @__PURE__ */ n("div", { role: "alert", ...h, className: ["toast-item", `toast-item--${t}`, c].filter(Boolean).join(" "), style: { ...d, ...f }, children: [
+    /* @__PURE__ */ n("div", { className: "toast-item__body", children: [
+      /* @__PURE__ */ a("span", { className: "toast-item__icon", "aria-hidden": "true", children: k[t] }),
+      /* @__PURE__ */ n("div", { className: "toast-item__content", children: [
+        /* @__PURE__ */ a("h5", { className: "toast-item__title", children: e }),
+        /* @__PURE__ */ a("p", { className: "toast-item__msg", children: s })
+      ] }),
+      r && /* @__PURE__ */ a("button", { type: "button", className: "toast-item__action", onClick: i, children: r }),
+      /* @__PURE__ */ a("button", { type: "button", className: "toast-item__close", "aria-label": "Dismiss alert", onClick: u, children: "✕" })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "toast-item__progress", "aria-hidden": "true" })
+  ] });
+}
+function H({ dotColor: t = "var(--c-primary, #6366f1)", label: e = "Someone is typing...", className: s, ...r }) {
+  return /* @__PURE__ */ a("div", { role: "status", "aria-label": e, ...r, className: ["typing-wrap", s].filter(Boolean).join(" "), children: /* @__PURE__ */ n("div", { className: "typing-dots", style: { "--dot-color": t }, children: [
+    /* @__PURE__ */ a("span", {}),
+    /* @__PURE__ */ a("span", {}),
+    /* @__PURE__ */ a("span", {})
+  ] }) });
+}
+export {
+  B as C,
+  $ as E,
+  P as G,
+  E as I,
+  G as N,
+  A as P,
+  F as R,
+  I as S,
+  U as T,
+  M as a,
+  S as b,
+  R as c,
+  T as d,
+  D as e,
+  L as f,
+  C as g,
+  O as h,
+  Y as i,
+  q as j,
+  H as k
+};