@geomak/ui 6.29.2 → 6.31.0

package/dist/index.cjs

@@ -507,8 +507,8 @@ function Avatar({
     if (fallback) return fallback;
     if (alt) {
       const parts = alt.trim().split(/\s+/).slice(0, 2);
-      const initials2 = parts.map((p) => p[0]?.toUpperCase() ?? "").join("");
-      if (initials2) return initials2;
+      const initials3 = parts.map((p) => p[0]?.toUpperCase() ?? "").join("");
+      if (initials3) return initials3;
     }
     return /* @__PURE__ */ jsxRuntime.jsx(PersonSilhouette, {});
   })();
@@ -2304,6 +2304,19 @@ var ArrowDown = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 2
 function TypingDots() {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-foreground-muted", style: { animationDelay: `${i * 0.15}s` } }, i)) });
 }
+var SKELETON_ROWS = [
+  { own: false, w: 150 },
+  { own: false, w: 110 },
+  { own: true, w: 180 },
+  { own: false, w: 130 },
+  { own: true, w: 90 }
+];
+function ChatSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", "aria-hidden": "true", children: SKELETON_ROWS.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex items-end gap-2", r.own ? "flex-row-reverse" : ""].filter(Boolean).join(" "), children: [
+    !r.own && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-surface" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-8 animate-pulse rounded-2xl bg-surface", style: { width: r.w } })
+  ] }, i)) });
+}
 function Chat({
   messages,
   currentUserId,
@@ -2316,6 +2329,7 @@ function Chat({
   placeholder = "Write a message\u2026",
   disabled = false,
   hideComposer = false,
+  loading = false,
   emptyState,
   height = 480,
   className = "",
@@ -2325,7 +2339,6 @@ function Chat({
   const atBottomRef = React28.useRef(true);
   const [showJump, setShowJump] = React28.useState(false);
   const [draft, setDraft] = React28.useState("");
-  const taRef = React28.useRef(null);
   const hasHeader = title != null || subtitle != null || avatar != null || headerActions != null;
   const isTyping = typingNames.length > 0;
   const scrollToBottom = React28.useCallback((smooth = true) => {
@@ -2347,12 +2360,6 @@ function Chat({
   React28.useEffect(() => {
     scrollToBottom(false);
   }, [scrollToBottom]);
-  React28.useLayoutEffect(() => {
-    const ta = taRef.current;
-    if (!ta) return;
-    ta.style.height = "auto";
-    ta.style.height = `${Math.min(ta.scrollHeight, 120)}px`;
-  }, [draft]);
   const send = () => {
     const text = draft.trim();
     if (!text || disabled) return;
@@ -2381,7 +2388,7 @@ function Chat({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: listRef, onScroll, className: "flex h-full flex-col gap-1 overflow-y-auto bg-background px-4 py-3", children: [
-            messages.length === 0 && !isTyping ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center text-center text-sm text-foreground-muted", children: emptyState ?? "No messages yet. Say hello \u{1F44B}" }) : messages.map((m, i) => {
+            loading && messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ChatSkeleton, {}) : messages.length === 0 && !isTyping ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center text-center text-sm text-foreground-muted", children: emptyState ?? "No messages yet. Say hello \u{1F44B}" }) : messages.map((m, i) => {
               const own = m.authorId === currentUserId;
               const prev = messages[i - 1];
               const next = messages[i + 1];
@@ -2436,15 +2443,14 @@ function Chat({
           /* @__PURE__ */ jsxRuntime.jsx(
             "textarea",
             {
-              ref: taRef,
-              rows: 1,
+              rows: 2,
               value: draft,
               disabled,
               placeholder,
               onChange: (e) => setDraft(e.target.value),
               onKeyDown,
               "aria-label": "Message",
-              className: `${fieldShell({ size: "md", hasError: false, disabled, sized: false })} max-h-[120px] flex-1 resize-none px-3 py-2 leading-snug`
+              className: `${fieldShell({ size: "md", hasError: false, disabled, sized: false })} h-[4.5rem] flex-1 resize-none px-3 py-2 leading-snug`
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -9320,6 +9326,154 @@ function useJwt(token) {
   const isValid = decoded.payload != null && !isExpired;
   return { payload: decoded.payload, header: decoded.header, expiresAt, isExpired, isValid, raw: token ?? null };
 }
+var GRADIENT = "radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 70%)";
+function Jumbotron({
+  eyebrow,
+  title,
+  description,
+  actions,
+  media,
+  layout = "centered",
+  background = "none",
+  className = "",
+  style
+}) {
+  const split = layout === "split" && media != null;
+  const bgClass = background === "surface" ? "bg-surface" : "";
+  const copy = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex flex-col gap-5", split ? "items-start text-left" : "items-center text-center"].join(" "), children: [
+    eyebrow != null && /* @__PURE__ */ jsxRuntime.jsx("div", { children: eyebrow }),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: ["text-4xl font-bold leading-tight tracking-tight text-foreground sm:text-5xl", split ? "" : "max-w-3xl"].join(" "), children: title }),
+    description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: ["text-lg leading-relaxed text-foreground-secondary", split ? "max-w-xl" : "max-w-2xl"].join(" "), children: description }),
+    actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["mt-2 flex flex-wrap gap-3", split ? "justify-start" : "justify-center"].join(" "), children: actions })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: ["relative overflow-hidden rounded-2xl px-6 py-16 sm:px-10 sm:py-24", bgClass, className].filter(Boolean).join(" "),
+      style: { ...background === "gradient" ? { backgroundImage: GRADIENT } : null, ...style },
+      children: split ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2", children: [
+        copy,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-xl", children: media })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center", children: [
+        copy,
+        media != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-12 w-full overflow-hidden rounded-xl", children: media })
+      ] })
+    }
+  );
+}
+var COLS = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4"
+};
+function FeatureGrid({
+  features,
+  eyebrow,
+  title,
+  description,
+  columns = 3,
+  centeredHeader = true,
+  className = "",
+  style
+}) {
+  const hasHeader = eyebrow != null || title != null || description != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
+    hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: ["mb-10 flex flex-col gap-3", centeredHeader ? "items-center text-center" : "items-start text-left"].join(" "), children: [
+      eyebrow != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
+      title != null && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
+      description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["grid grid-cols-1 gap-6", COLS[columns]].join(" "), children: features.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 rounded-xl border border-border bg-surface p-5", children: [
+      f.icon != null && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "flex h-10 w-10 items-center justify-center rounded-lg text-accent",
+          style: { backgroundColor: "color-mix(in oklab, var(--color-accent) 12%, var(--color-surface))" },
+          children: f.icon
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-foreground", children: f.title }),
+      f.description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed text-foreground-secondary", children: f.description })
+    ] }, f.key ?? i)) })
+  ] });
+}
+var Check3 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", className: "mt-0.5 h-4 w-4 flex-shrink-0 text-accent", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M20 6 9 17l-5-5" }) });
+function PricingPlans({ plans, eyebrow, title, description, className = "", style }) {
+  const hasHeader = eyebrow != null || title != null || description != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
+    hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "mb-10 flex flex-col items-center gap-3 text-center", children: [
+      eyebrow != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
+      title != null && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
+      description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 lg:grid-cols-3", children: plans.map((p, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: [
+          "relative flex flex-col rounded-2xl border bg-surface p-6",
+          p.highlighted ? "border-accent shadow-lg lg:-my-2 lg:py-8" : "border-border"
+        ].join(" "),
+        children: [
+          p.highlighted && p.badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-accent px-3 py-0.5 text-xs font-semibold text-accent-fg shadow-sm", children: p.badge }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold uppercase tracking-wide text-foreground-muted", children: p.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-baseline gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-4xl font-bold tracking-tight text-foreground", children: p.price }),
+            p.period != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground-muted", children: p.period })
+          ] }),
+          p.description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm leading-relaxed text-foreground-secondary", children: p.description }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-6 flex flex-1 flex-col gap-2.5", children: p.features.map((f, fi) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex gap-2 text-sm text-foreground-secondary", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Check3, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: f })
+          ] }, fi)) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button_default,
+            {
+              content: p.cta.label,
+              variant: p.highlighted ? "primary" : "outline",
+              onClick: p.cta.onClick,
+              style: { width: "100%" }
+            }
+          ) })
+        ]
+      },
+      p.key ?? i
+    )) })
+  ] });
+}
+var COLS2 = {
+  1: "mx-auto max-w-2xl",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3"
+};
+var initials2 = (name) => typeof name === "string" ? name.trim().split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || void 0 : void 0;
+function Stars({ value }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-0.5", "aria-label": `${value} out of 5`, children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", className: `h-4 w-4 ${i < value ? "text-status-warning" : "text-border-strong"}`, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7L12 2z" }) }, i)) });
+}
+function Testimonials({ testimonials, eyebrow, title, description, columns = 3, className = "", style }) {
+  const hasHeader = eyebrow != null || title != null || description != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
+    hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "mb-10 flex flex-col items-center gap-3 text-center", children: [
+      eyebrow != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
+      title != null && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
+      description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["grid grid-cols-1 gap-6", COLS2[columns]].join(" "), children: testimonials.map((tm, i) => /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: "flex flex-col gap-4 rounded-xl border border-border bg-surface p-6", children: [
+      tm.rating != null && /* @__PURE__ */ jsxRuntime.jsx(Stars, { value: tm.rating }),
+      /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "flex-1 text-sm leading-relaxed text-foreground", children: [
+        "\u201C",
+        tm.quote,
+        "\u201D"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("figcaption", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: tm.avatar, alt: typeof tm.author === "string" ? tm.author : "Reviewer", fallback: initials2(tm.author), size: "sm" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-semibold text-foreground", children: tm.author }),
+          tm.role != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs text-foreground-muted", children: tm.role })
+        ] })
+      ] })
+    ] }, tm.key ?? i)) })
+  ] });
+}
 
 Object.defineProperty(exports, "COLORS", {
   enumerable: true,
@@ -9366,6 +9520,7 @@ exports.Dropdown = Dropdown;
 exports.EmptyCart = EmptyCart;
 exports.FAB = FAB;
 exports.FadingBase = FadingBase;
+exports.FeatureGrid = FeatureGrid;
 exports.Field = Field;
 exports.FieldHelpIcon = FieldHelpIcon;
 exports.FieldLabel = FieldLabel;
@@ -9379,6 +9534,7 @@ exports.Grid = Grid2;
 exports.GridCard = GridCard;
 exports.Icon = icons_default;
 exports.IconButton = IconButton;
+exports.Jumbotron = Jumbotron;
 exports.Kbd = Kbd;
 exports.List = List2;
 exports.LoadingSpinner = LoadingSpinner;
@@ -9393,6 +9549,7 @@ exports.OtpInput = OtpInput;
 exports.Password = Password;
 exports.PopConfirm = PopConfirm;
 exports.Portal = Portal;
+exports.PricingPlans = PricingPlans;
 exports.RadioGroup = RadioGroup;
 exports.Rating = Rating;
 exports.ScalableContainer = ScalableContainer;
@@ -9413,6 +9570,7 @@ exports.Table = Table;
 exports.Tabs = Tabs_default;
 exports.TagsInput = TagsInput;
 exports.Temporal = DatePicker;
+exports.Testimonials = Testimonials;
 exports.TextArea = TextArea;
 exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;