@geomak/ui 6.29.2 → 6.31.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-I2P4JJDB.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-I2P4JJDB.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React28, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useLayoutEffect, useContext, useSyncExternalStore } from 'react';
+import React28, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -470,8 +470,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__ */ jsx(PersonSilhouette, {});
   })();
@@ -2267,6 +2267,19 @@ var ArrowDown = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "
 function TypingDots() {
   return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-col gap-2", "aria-hidden": "true", children: SKELETON_ROWS.map((r, i) => /* @__PURE__ */ jsxs("div", { className: ["flex items-end gap-2", r.own ? "flex-row-reverse" : ""].filter(Boolean).join(" "), children: [
+    !r.own && /* @__PURE__ */ jsx("span", { className: "h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-surface" }),
+    /* @__PURE__ */ jsx("span", { className: "h-8 animate-pulse rounded-2xl bg-surface", style: { width: r.w } })
+  ] }, i)) });
+}
 function Chat({
   messages,
   currentUserId,
@@ -2279,6 +2292,7 @@ function Chat({
   placeholder = "Write a message\u2026",
   disabled = false,
   hideComposer = false,
+  loading = false,
   emptyState,
   height = 480,
   className = "",
@@ -2288,7 +2302,6 @@ function Chat({
   const atBottomRef = useRef(true);
   const [showJump, setShowJump] = useState(false);
   const [draft, setDraft] = useState("");
-  const taRef = useRef(null);
   const hasHeader = title != null || subtitle != null || avatar != null || headerActions != null;
   const isTyping = typingNames.length > 0;
   const scrollToBottom = useCallback((smooth = true) => {
@@ -2310,12 +2323,6 @@ function Chat({
   useEffect(() => {
     scrollToBottom(false);
   }, [scrollToBottom]);
-  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;
@@ -2344,7 +2351,7 @@ function Chat({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
           /* @__PURE__ */ 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__ */ 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__ */ jsx(ChatSkeleton, {}) : messages.length === 0 && !isTyping ? /* @__PURE__ */ 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];
@@ -2399,15 +2406,14 @@ function Chat({
           /* @__PURE__ */ 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__ */ jsx(
@@ -9283,7 +9289,155 @@ 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__ */ jsxs("div", { className: ["flex flex-col gap-5", split ? "items-start text-left" : "items-center text-center"].join(" "), children: [
+    eyebrow != null && /* @__PURE__ */ jsx("div", { children: eyebrow }),
+    /* @__PURE__ */ 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__ */ jsx("p", { className: ["text-lg leading-relaxed text-foreground-secondary", split ? "max-w-xl" : "max-w-2xl"].join(" "), children: description }),
+    actions != null && /* @__PURE__ */ jsx("div", { className: ["mt-2 flex flex-wrap gap-3", split ? "justify-start" : "justify-center"].join(" "), children: actions })
+  ] });
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2", children: [
+        copy,
+        /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl", children: media })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center", children: [
+        copy,
+        media != null && /* @__PURE__ */ 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__ */ jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
+    hasHeader && /* @__PURE__ */ jsxs("header", { className: ["mb-10 flex flex-col gap-3", centeredHeader ? "items-center text-center" : "items-start text-left"].join(" "), children: [
+      eyebrow != null && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
+      title != null && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
+      description != null && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 gap-6", COLS[columns]].join(" "), children: features.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border border-border bg-surface p-5", children: [
+      f.icon != null && /* @__PURE__ */ 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__ */ jsx("h3", { className: "text-base font-semibold text-foreground", children: f.title }),
+      f.description != null && /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-foreground-secondary", children: f.description })
+    ] }, f.key ?? i)) })
+  ] });
+}
+var Check3 = () => /* @__PURE__ */ 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__ */ 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__ */ jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
+    hasHeader && /* @__PURE__ */ jsxs("header", { className: "mb-10 flex flex-col items-center gap-3 text-center", children: [
+      eyebrow != null && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
+      title != null && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
+      description != null && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
+    ] }),
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "text-sm font-semibold uppercase tracking-wide text-foreground-muted", children: p.name }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-baseline gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold tracking-tight text-foreground", children: p.price }),
+            p.period != null && /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-muted", children: p.period })
+          ] }),
+          p.description != null && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-foreground-secondary", children: p.description }),
+          /* @__PURE__ */ jsx("ul", { className: "mt-6 flex flex-1 flex-col gap-2.5", children: p.features.map((f, fi) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2 text-sm text-foreground-secondary", children: [
+            /* @__PURE__ */ jsx(Check3, {}),
+            /* @__PURE__ */ jsx("span", { children: f })
+          ] }, fi)) }),
+          /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex gap-0.5", "aria-label": `${value} out of 5`, children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ 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__ */ 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__ */ jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
+    hasHeader && /* @__PURE__ */ jsxs("header", { className: "mb-10 flex flex-col items-center gap-3 text-center", children: [
+      eyebrow != null && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
+      title != null && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
+      description != null && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 gap-6", COLS2[columns]].join(" "), children: testimonials.map((tm, i) => /* @__PURE__ */ jsxs("figure", { className: "flex flex-col gap-4 rounded-xl border border-border bg-surface p-6", children: [
+      tm.rating != null && /* @__PURE__ */ jsx(Stars, { value: tm.rating }),
+      /* @__PURE__ */ jsxs("blockquote", { className: "flex-1 text-sm leading-relaxed text-foreground", children: [
+        "\u201C",
+        tm.quote,
+        "\u201D"
+      ] }),
+      /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Avatar, { src: tm.avatar, alt: typeof tm.author === "string" ? tm.author : "Reviewer", fallback: initials2(tm.author), size: "sm" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold text-foreground", children: tm.author }),
+          tm.role != null && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-foreground-muted", children: tm.role })
+        ] })
+      ] })
+    ] }, tm.key ?? i)) })
+  ] });
+}
 
-export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Chat, Checkbox, Checkout, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, Kbd, List2 as List, LoadingSpinner, LogoutTimer, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, PopConfirm, Portal, RadioGroup, Rating, ScalableContainer, Scheduler, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
+export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Chat, Checkbox, Checkout, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, FeatureGrid, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, Jumbotron, Kbd, List2 as List, LoadingSpinner, LogoutTimer, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, PopConfirm, Portal, PricingPlans, RadioGroup, Rating, ScalableContainer, Scheduler, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, Testimonials, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map