@godxjp/ui 20.2.1 → 21.0.0

package/dist/components/data-display/chat-bubble.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { ChatBubbleListProp, ChatBubbleProp } from "../../props/components/data-display.prop.js";
+export type { ChatBubbleListProp, ChatBubblePlacementProp, ChatBubbleProp, ChatBubbleToneProp, ChatBubbleTypingProp, ChatBubbleVariantProp, ChatMessageProp, } from "../../props/components/data-display.prop.js";
+export type ChatBubbleProps = ChatBubbleProp & Omit<React.HTMLAttributes<HTMLElement>, keyof ChatBubbleProp>;
+/**
+ * ChatBubble — ONE message in a conversation: an optional author mark, a header naming the turn,
+ * the message body, and a footer for timestamps or per-message actions.
+ *
+ * It is an `<article>` inside the feed's `role="log"`, and it deliberately owns NO live region of
+ * its own: one live region per bubble floods a screen reader on every token of a stream. The feed
+ * (`ChatBubbleList`) owns the single `aria-live="polite"` region; a bubble only ever says "I am
+ * still being produced" through `aria-busy`.
+ */
+export declare const ChatBubble: React.ForwardRefExoticComponent<ChatBubbleProp & Omit<React.HTMLAttributes<HTMLElement>, keyof ChatBubbleProp> & React.RefAttributes<HTMLElement>>;
+export type ChatBubbleListProps = ChatBubbleListProp & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ChatBubbleListProp>;
+/**
+ * ChatBubbleList — the message feed.
+ *
+ * The behaviour that earns this a component rather than a `ScrollArea` + `map` is STICK-TO-BOTTOM:
+ * new messages keep the viewport pinned only while the reader is ALREADY at the bottom. The moment
+ * they scroll up to re-read something the pin is revoked and stays revoked until they ask for it
+ * back — silently yanking a reader to the newest message mid-sentence is a change of context they
+ * did not request (WCAG 3.2.5), and it is the classic chat-UI defect. The way back is a real,
+ * focusable button that also says how many messages arrived while they were away.
+ *
+ * GIVE IT A DEFINITE HEIGHT — `className="h-96"`, or a flex/grid parent that hands it a track.
+ * The feed scrolls INSIDE itself; with no height it simply grows to its content, nothing ever
+ * overflows, and every behaviour above has nothing to act on.
+ */
+export declare const ChatBubbleList: React.ForwardRefExoticComponent<ChatBubbleListProp & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ChatBubbleListProp> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/chat-bubble.js

@@ -0,0 +1,229 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDown } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useMediaQuery } from "../../lib/hooks.js";
+import { cn } from "../../lib/utils.js";
+import { Skeleton } from "../feedback/skeleton.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { VisuallyHidden } from "../general/visually-hidden.js";
+import { ScrollArea } from "./scroll-area.js";
+const BODY_SIZE = {
+  xs: "2xs",
+  sm: "xs",
+  md: "sm",
+  lg: "lg"
+};
+const META_SIZE = {
+  xs: "2xs",
+  sm: "2xs",
+  md: "xs",
+  lg: "sm"
+};
+const TYPING_STEP = 1;
+const TYPING_INTERVAL = 50;
+function resolveTyping(typing) {
+  if (typing === void 0 || typing === false) {
+    return { enabled: false, step: TYPING_STEP, interval: TYPING_INTERVAL };
+  }
+  if (typing === true) return { enabled: true, step: TYPING_STEP, interval: TYPING_INTERVAL };
+  return {
+    enabled: true,
+    // A non-positive step would never reach the end of the string and a non-positive interval
+    // would spin the timer — both are "the animation never completes", which is the one outcome
+    // a reader can neither read nor dismiss.
+    step: typing.step != null && typing.step > 0 ? Math.floor(typing.step) : TYPING_STEP,
+    interval: typing.interval != null && typing.interval > 0 ? typing.interval : TYPING_INTERVAL
+  };
+}
+function useRevealedLength(text, enabled, step, interval) {
+  const full = text?.length ?? 0;
+  const [revealed, setRevealed] = React.useState(() => enabled ? 0 : full);
+  React.useEffect(() => {
+    if (!enabled || text === void 0) {
+      setRevealed(text?.length ?? 0);
+      return void 0;
+    }
+    setRevealed(0);
+    let shown = 0;
+    const timer = setInterval(() => {
+      shown = Math.min(text.length, shown + step);
+      setRevealed(shown);
+      if (shown >= text.length) clearInterval(timer);
+    }, interval);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [text, enabled, step, interval]);
+  return Math.min(revealed, full);
+}
+const TONE_KEY = {
+  info: "chat.bubble.tone.info",
+  success: "chat.bubble.tone.success",
+  warning: "chat.bubble.tone.warning",
+  destructive: "chat.bubble.tone.destructive"
+};
+const ChatBubble = React.forwardRef(
+  ({
+    children,
+    placement = "start",
+    variant = "filled",
+    avatar,
+    header,
+    footer,
+    loading = false,
+    typing,
+    size = "md",
+    tone = "default",
+    className,
+    id,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
+    const generatedId = React.useId();
+    const headerId = `${id ?? generatedId}-header`;
+    const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+    const text = typeof children === "string" ? children : void 0;
+    const { enabled, step, interval } = resolveTyping(typing);
+    const animates = enabled && !loading && text !== void 0 && !reduceMotion;
+    const revealed = useRevealedLength(text, animates, step, interval);
+    const streaming = animates && revealed < (text?.length ?? 0);
+    const body = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "ui-chat-bubble-skeleton", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "ui-chat-bubble-skeleton-line" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "ui-chat-bubble-skeleton-line ui-chat-bubble-skeleton-line--short" })
+      ] }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: t("chat.bubble.loading") })
+    ] }) : streaming ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Text, { as: "div", size: BODY_SIZE[size], whitespace: "pre-wrap", "aria-hidden": "true", children: [
+        text?.slice(0, revealed),
+        /* @__PURE__ */ jsx("span", { className: "ui-chat-bubble-caret" })
+      ] }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: t("chat.bubble.typing") })
+    ] }) : /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "div",
+        size: BODY_SIZE[size],
+        whitespace: text !== void 0 ? "pre-wrap" : void 0,
+        children
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        ref,
+        id,
+        "data-slot": "chat-bubble",
+        "data-placement": placement,
+        "data-variant": variant,
+        "data-size": size,
+        "data-tone": tone,
+        "aria-busy": loading || streaming ? true : void 0,
+        "aria-labelledby": header != null ? headerId : void 0,
+        className: cn("ui-chat-bubble", className),
+        ...props,
+        children: [
+          avatar != null ? /* @__PURE__ */ jsx("span", { "data-slot": "chat-bubble-avatar", className: "ui-chat-bubble-avatar", children: avatar }) : null,
+          /* @__PURE__ */ jsxs("div", { "data-slot": "chat-bubble-column", className: "ui-chat-bubble-column", children: [
+            header != null ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "div",
+                id: headerId,
+                className: "ui-chat-bubble-header",
+                size: META_SIZE[size],
+                tone: "muted",
+                weight: "medium",
+                children: header
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("div", { "data-slot": "chat-bubble-body", className: "ui-chat-bubble-body", children: [
+              tone !== "default" ? /* @__PURE__ */ jsx(VisuallyHidden, { children: t(TONE_KEY[tone]) }) : null,
+              body
+            ] }),
+            footer != null ? /* @__PURE__ */ jsx(Text, { as: "div", className: "ui-chat-bubble-footer", size: META_SIZE[size], tone: "muted", children: footer }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+ChatBubble.displayName = "ChatBubble";
+const ChatBubbleList = React.forwardRef(
+  ({ items, roles, autoScroll = true, label, className, id, ...props }, ref) => {
+    const { t } = useTranslation();
+    const viewportRef = React.useRef(null);
+    const [anchored, setAnchored] = React.useState(true);
+    const seen = React.useRef(items.length);
+    React.useEffect(() => {
+      if (anchored) seen.current = items.length;
+    }, [anchored, items.length]);
+    const pending = anchored ? 0 : Math.max(0, items.length - seen.current);
+    const jumpToLatest = React.useCallback(() => {
+      const viewport = viewportRef.current;
+      if (viewport) {
+        const bottom = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+        if (typeof viewport.scrollTo === "function") {
+          viewport.scrollTo({ top: bottom, behavior: "instant" });
+        } else {
+          viewport.scrollTop = bottom;
+        }
+      }
+      setAnchored(true);
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        "data-slot": "chat-bubble-list",
+        "data-anchored": anchored ? "" : void 0,
+        className: cn("ui-chat-bubble-list", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              className: "ui-chat-bubble-list-scroller",
+              anchor: autoScroll ? "bottom" : "none",
+              viewportRef,
+              onAnchoredChange: setAnchored,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "log",
+                  "aria-live": "polite",
+                  "aria-label": label ?? t("chat.list.label"),
+                  "data-slot": "chat-bubble-list-feed",
+                  className: "ui-chat-bubble-list-feed",
+                  children: items.map(({ id: messageId, role, content, ...message }) => /* @__PURE__ */ jsx(
+                    ChatBubble,
+                    {
+                      id: messageId,
+                      ...role != null ? roles?.[role] : void 0,
+                      ...message,
+                      children: content
+                    },
+                    messageId
+                  ))
+                }
+              )
+            }
+          ),
+          anchored ? null : /* @__PURE__ */ jsx("div", { "data-slot": "chat-bubble-list-jump", className: "ui-chat-bubble-list-jump", children: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "secondary", shape: "pill", onClick: jumpToLatest, children: [
+            /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true" }),
+            pending > 0 ? t("chat.list.newMessages", { count: pending }) : t("chat.list.jumpToLatest")
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+ChatBubbleList.displayName = "ChatBubbleList";
+export {
+  ChatBubble,
+  ChatBubbleList
+};

package/dist/components/data-display/descriptions.js

@@ -104,7 +104,10 @@ function DescriptionsItem({ label, mono, span, className, children }) {
             "data-slot": "descriptions-label",
             "data-label-align": endAlignedLabel ? "end" : void 0,
             className: cn(
-              "text-muted-foreground text-xs",
+              // Size comes from the token pair, NOT from `text-xs`: a hard-coded utility here left the
+              // label one type step below the value beside it, and out of reach of a service theme.
+              // The muted colour is what distinguishes a label from its value.
+              "text-muted-foreground text-[length:var(--descriptions-label-font-size)] leading-[var(--descriptions-label-line-height)]",
               // `end`-align only ever applies in horizontal layout — same guard `Form` uses, so a
               endAlignedLabel && "text-end"
             ),

package/dist/components/data-display/index.d.ts

@@ -26,8 +26,6 @@ export type { CodeBlockProp, CodeBlockProps } from "./code-block.js";
 export { Prose } from "./prose.js";
 export type { ProseProp, ProseProps } from "./prose.js";
 export type { ProgressProps, ProgressSegment, ProgressTone } from "./progress.js";
-export { TreeList } from "./tree-list.js";
-export type { TreeListItem, TreeListProps } from "./tree-list.js";
 export { Timeline } from "./timeline.js";
 export type { TimelineItem, TimelineProps } from "./timeline.js";
 export { TimelineGrid } from "./timeline-grid.js";
@@ -43,3 +41,7 @@ export { PermissionMatrix } from "./permission-matrix.js";
 export type { PermissionMatrixGrantsProp, PermissionMatrixPermissionProp, PermissionMatrixProp, PermissionMatrixProps, PermissionMatrixRoleProp, } from "./permission-matrix.js";
 export { RangeTimeline } from "./range-timeline.js";
 export type { RangeTimelineProps, RangeTimelineRow } from "./range-timeline.js";
+export { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
+export type { ChatBubbleListProp, ChatBubbleListProps, ChatBubblePlacementProp, ChatBubbleProp, ChatBubbleProps, ChatBubbleToneProp, ChatBubbleTypingProp, ChatBubbleVariantProp, ChatMessageProp, } from "./chat-bubble.js";
+export { Tree } from "./tree.js";
+export type { TreeNodeProp, TreeProp, TreeProps } from "./tree.js";

package/dist/components/data-display/index.js

@@ -28,7 +28,6 @@ import { EmptyState } from "./empty-state.js";
 import { Progress } from "./progress.js";
 import { CodeBlock } from "./code-block.js";
 import { Prose } from "./prose.js";
-import { TreeList } from "./tree-list.js";
 import { Timeline } from "./timeline.js";
 import { TimelineGrid } from "./timeline-grid.js";
 import {
@@ -55,6 +54,8 @@ import {
 } from "./carousel.js";
 import { PermissionMatrix } from "./permission-matrix.js";
 import { RangeTimeline } from "./range-timeline.js";
+import { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
+import { Tree } from "./tree.js";
 export {
   Accordion,
   AccordionContent,
@@ -79,6 +80,8 @@ export {
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
+  ChatBubble,
+  ChatBubbleList,
   CodeBlock,
   Collapsible,
   CollapsibleContent,
@@ -119,7 +122,7 @@ export {
   TableRow,
   Timeline,
   TimelineGrid,
-  TreeList,
+  Tree,
   flexRender,
   useCarousel
 };

package/dist/components/data-display/popover.js

@@ -165,7 +165,7 @@ function PopoverContent({
       }
     }
   }, [root.open]);
-  const { open, setOpen, triggerRef } = root;
+  const { open, setOpen, triggerRef, anchorRef, anchored } = root;
   React.useEffect(() => {
     if (!open) return;
     const onPointerDown = (event) => {
@@ -173,11 +173,12 @@ function PopoverContent({
       if (!target) return;
       if (contentRef.current?.contains(target)) return;
       if (triggerRef.current?.contains(target)) return;
+      if (anchored && anchorRef.current?.contains(target)) return;
       setOpen(false);
     };
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [open, setOpen, triggerRef]);
+  }, [open, setOpen, triggerRef, anchorRef, anchored]);
   const overlayPortalContainer = useOverlayPortalContainer(portalContainer);
   return /* @__PURE__ */ jsx(
     AriaPopover,

package/dist/components/data-display/scroll-area.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect } from "@react-aria/utils";
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils.js";
@@ -112,6 +113,18 @@ function useBottomAnchor(viewport, enabled, offset, onAnchoredChange) {
     };
   }, [viewport, enabled, offset]);
 }
+function useAmbientDirection(root, provided) {
+  const [ambient, setAmbient] = React.useState(void 0);
+  useLayoutEffect(() => {
+    if (provided !== void 0) return;
+    const parent = root?.parentElement;
+    if (!parent || typeof window === "undefined" || typeof window.getComputedStyle !== "function") {
+      return;
+    }
+    setAmbient(window.getComputedStyle(parent).direction === "rtl" ? "rtl" : "ltr");
+  }, [root, provided]);
+  return provided ?? ambient;
+}
 const ScrollArea = React.forwardRef(
   ({
     className,
@@ -121,9 +134,20 @@ const ScrollArea = React.forwardRef(
     anchorOffset,
     onAnchoredChange,
     orientation = "vertical",
+    dir,
     ...props
   }, ref) => {
     const [viewport, setViewport] = React.useState(null);
+    const [root, setRoot] = React.useState(null);
+    const attachRoot = React.useCallback(
+      (node) => {
+        setRoot(node);
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const direction = useAmbientDirection(root, dir);
     const attachViewport = React.useCallback(
       (node) => {
         setViewport(node);
@@ -137,7 +161,8 @@ const ScrollArea = React.forwardRef(
     return /* @__PURE__ */ jsxs(
       ScrollAreaPrimitive.Root,
       {
-        ref,
+        ref: attachRoot,
+        dir: direction,
         className: cn("relative overflow-hidden", className),
         ...props,
         children: [

package/dist/components/data-display/tree.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { TreeProp } from "../../props/components/data-display.prop.js";
+export type { TreeNodeProp, TreeProp, TreeProp as TreeProps, } from "../../props/components/data-display.prop.js";
+/**
+ * `ref` reaches the `role="tree"` container — the element a page scrolls to, measures, or
+ * focus-manages. Every unknown prop (`aria-*`, `data-*`) rides `...ariaProps` onto the same node.
+ */
+export declare const Tree: React.ForwardRefExoticComponent<TreeProp & React.RefAttributes<HTMLDivElement>>;