@geomak/ui 6.29.1 → 6.30.0

package/dist/index.cjs

@@ -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(
@@ -5562,9 +5568,10 @@ function Pagination({
   }, [serverSide, options.perPage, picker]);
   const currentOpt = picker.find((o) => o.key === displayPerPageKey);
   const currentPerPageLabel = currentOpt?.label ?? currentOpt?.value ?? options.perPage ?? "";
-  const navBtn = (icon, disabled, onClick, title) => /* @__PURE__ */ jsxRuntime.jsx(Button_default, { variant: "outline", size: "sm", disabled, onClick, icon, className: "w-7 !px-0 focus-visible:!ring-[3px] focus-visible:!ring-focus-ring focus-visible:!ring-offset-0", "aria-label": title, title });
-  const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
-  const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
+  const FOCUS = "focus-visible:!ring-0 focus-visible:!border-accent";
+  const navBtn = (icon, disabled, onClick, title) => /* @__PURE__ */ jsxRuntime.jsx(Button_default, { variant: "outline", size: "sm", disabled, onClick, icon, className: `w-7 !px-0 ${FOCUS}`, "aria-label": title, title });
+  const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 6l6 6-6 6" }) });
+  const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l6 6-6 6M12 6l6 6-6 6" }) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-3", children: [
     options.withPicker && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-auto flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-xs text-foreground-muted", children: "Rows per page" }),
@@ -5574,7 +5581,7 @@ function Pagination({
           variant: "outline",
           size: "sm",
           side: "top",
-          className: "focus-visible:!ring-[3px] focus-visible:!ring-focus-ring focus-visible:!ring-offset-0",
+          className: FOCUS,
           label: String(currentPerPageLabel),
           items: picker.map((o) => ({
             key: o.key,
@@ -5590,7 +5597,7 @@ function Pagination({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
       navBtn(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rotate-180", children: doubleChevronRight }), activePage === 0, () => onPageChange(0), "First page"),
       navBtn(/* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex rotate-180", children: chevronRight }), activePage === 0, () => activePage > 0 && onPageChange(activePage - 1), "Previous page"),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-2 text-sm tabular-nums text-foreground-secondary select-none", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-2 text-xs tabular-nums text-foreground-secondary select-none", children: [
         activePage + 1,
         " ",
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-foreground-muted", children: [