@godxjp/ui 23.2.1 → 23.4.0

package/dist/components/layout/draggable-panel.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { DragAxisProp, DraggablePanelPositionProp } from "../../props/components/layout.prop.js";
+export type { DraggablePanelProp, DraggablePanelProp as DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DragAxisProp, DragBoundsProp, } from "../../props/components/layout.prop.js";
+export declare const DraggablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "children" | "onDrag" | "title"> & {
+    title: import("../../props/index.js").TitleProp;
+    children?: import("../../props/index.js").ChildrenProp;
+    extra?: import("../../props/index.js").ExtraProp;
+    placement?: import("./draggable-panel.js").DraggablePanelPlacementProp;
+    width?: Extract<import("../../props/index.js").SizeProp, "sm" | "md" | "lg">;
+    axis?: DragAxisProp;
+    bounds?: import("./draggable-panel.js").DragBoundsProp;
+    position?: DraggablePanelPositionProp;
+    defaultPosition?: DraggablePanelPositionProp;
+    onPositionChange?: (position: DraggablePanelPositionProp) => void;
+    onClose?: () => void;
+    disabled?: import("../../props/index.js").DisabledProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/draggable-panel.js

@@ -0,0 +1,189 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { GripVertical, X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+const AXIS_ALLOWS_X = {
+  both: true,
+  x: true,
+  y: false,
+  none: false
+};
+const AXIS_ALLOWS_Y = {
+  both: true,
+  x: false,
+  y: true,
+  none: false
+};
+function readStep(element, name, fallback) {
+  if (!element || typeof window === "undefined" || typeof window.getComputedStyle !== "function") {
+    return fallback;
+  }
+  const raw = window.getComputedStyle(element).getPropertyValue(name).trim();
+  const parsed = Number.parseFloat(raw);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+function clampToViewport(element, next, current) {
+  if (!element || typeof window === "undefined") return next;
+  const rect = element.getBoundingClientRect();
+  const restLeft = rect.left - current.x;
+  const restTop = rect.top - current.y;
+  const maxLeft = window.innerWidth - rect.width;
+  const maxTop = window.innerHeight - rect.height;
+  const clamp = (value, min, max) => max < min ? min : Math.min(Math.max(value, min), max);
+  return {
+    x: clamp(next.x, -restLeft, maxLeft - restLeft),
+    y: clamp(next.y, -restTop, maxTop - restTop)
+  };
+}
+const ORIGIN = { x: 0, y: 0 };
+const DraggablePanel = React.forwardRef(
+  ({
+    title,
+    children,
+    extra,
+    placement = "bottom-end",
+    width = "md",
+    axis = "both",
+    bounds = "viewport",
+    position,
+    defaultPosition,
+    onPositionChange,
+    onClose,
+    disabled = false,
+    className,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
+    const panelRef = React.useRef(null);
+    const [uncontrolled, setUncontrolled] = React.useState(defaultPosition ?? ORIGIN);
+    const [dragging, setDragging] = React.useState(false);
+    const stopDrag = React.useRef(null);
+    const current = position ?? uncontrolled;
+    const currentRef = React.useRef(current);
+    currentRef.current = current;
+    const commit = React.useCallback(
+      (next) => {
+        const clamped = bounds === "viewport" ? clampToViewport(panelRef.current, next, currentRef.current) : next;
+        if (clamped.x === currentRef.current.x && clamped.y === currentRef.current.y) return;
+        if (position === void 0) setUncontrolled(clamped);
+        onPositionChange?.(clamped);
+      },
+      [bounds, onPositionChange, position]
+    );
+    React.useEffect(() => () => stopDrag.current?.(), []);
+    const setPanel = React.useCallback(
+      (node) => {
+        panelRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const handlePointerDown = (event) => {
+      if (disabled || axis === "none") return;
+      if (event.button !== 0 || event.ctrlKey || event.metaKey || event.altKey) return;
+      event.preventDefault();
+      const pointerId = event.pointerId;
+      const origin = { x: event.clientX, y: event.clientY };
+      const start = currentRef.current;
+      const onMove = (move) => {
+        if (move.pointerId !== pointerId) return;
+        commit({
+          x: AXIS_ALLOWS_X[axis] ? start.x + (move.clientX - origin.x) : start.x,
+          y: AXIS_ALLOWS_Y[axis] ? start.y + (move.clientY - origin.y) : start.y
+        });
+      };
+      const finish = () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onUp);
+        stopDrag.current = null;
+        setDragging(false);
+      };
+      const onUp = (up) => {
+        if (up.pointerId !== pointerId) return;
+        finish();
+      };
+      stopDrag.current?.();
+      stopDrag.current = finish;
+      setDragging(true);
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onUp);
+    };
+    const handleKeyDown = (event) => {
+      if (disabled || axis === "none") return;
+      const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+      const vertical = event.key === "ArrowUp" || event.key === "ArrowDown";
+      if (!horizontal && !vertical) return;
+      if (horizontal && !AXIS_ALLOWS_X[axis]) return;
+      if (vertical && !AXIS_ALLOWS_Y[axis]) return;
+      event.preventDefault();
+      const step = readStep(
+        panelRef.current,
+        event.shiftKey ? "--draggable-panel-step-offset-lg" : "--draggable-panel-step-offset",
+        event.shiftKey ? 40 : 8
+      );
+      const sign = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 1;
+      commit({
+        x: horizontal ? currentRef.current.x + sign * step : currentRef.current.x,
+        y: vertical ? currentRef.current.y + sign * step : currentRef.current.y
+      });
+    };
+    const movable = !disabled && axis !== "none";
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref: setPanel,
+        "data-slot": "draggable-panel",
+        "data-placement": placement,
+        "data-width": width,
+        "data-dragging": dragging ? "" : void 0,
+        "aria-label": typeof title === "string" ? title : void 0,
+        className: cn("ui-draggable-panel", className),
+        style: {
+          "--draggable-panel-offset-x": current.x,
+          "--draggable-panel-offset-y": current.y
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "ui-draggable-panel-bar", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-slot": "draggable-panel-handle",
+                className: "ui-draggable-panel-handle ui-focus-ring",
+                "aria-label": t("layout.draggablePanel.moveLabel"),
+                "aria-disabled": movable ? void 0 : "true",
+                onPointerDown: handlePointerDown,
+                onKeyDown: handleKeyDown,
+                children: /* @__PURE__ */ jsx(GripVertical, { className: "ui-draggable-panel-handle-icon", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "ui-draggable-panel-title", children: title }),
+            extra != null && /* @__PURE__ */ jsx("div", { className: "ui-draggable-panel-extra", children: extra }),
+            onClose != null && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-slot": "draggable-panel-close",
+                className: "ui-draggable-panel-close ui-focus-ring",
+                "aria-label": t("feedback.alert.dismiss"),
+                onClick: onClose,
+                children: /* @__PURE__ */ jsx(X, { className: "ui-draggable-panel-close-icon", "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ui-draggable-panel-body", children })
+        ]
+      }
+    );
+  }
+);
+DraggablePanel.displayName = "DraggablePanel";
+export {
+  DraggablePanel
+};

package/dist/components/layout/error-surface.js

@@ -8,6 +8,7 @@ import { EmptyState } from "../data-display/empty-state.js";
 import { Progress } from "../data-display/progress.js";
 import { Text } from "../general/typography.js";
 import { CenteredShell } from "./centered-shell.js";
+import { dateTimeFormat, numberFormat } from "../../lib/intl-cache.js";
 const STATUS_META = {
   400: { icon: TriangleAlert, tone: "warning" },
   403: { icon: ShieldAlert, tone: "warning" },
@@ -37,7 +38,7 @@ function formatMaintenanceWindow(maintenance, locale) {
   };
   const start = new Date(maintenance.start);
   if (Number.isNaN(start.getTime())) return maintenance.start;
-  const formatter = new Intl.DateTimeFormat(locale, options);
+  const formatter = dateTimeFormat(locale, options);
   if (maintenance.end === void 0) return formatter.format(start);
   const end = new Date(maintenance.end);
   if (Number.isNaN(end.getTime())) return formatter.format(start);
@@ -72,7 +73,7 @@ const ErrorSurface = React.forwardRef(
     const maintenanceProgress = maintenance?.progress;
     const hasProgress = typeof maintenanceProgress === "number" && Number.isFinite(maintenanceProgress);
     const progressLabel = hasProgress ? t("layout.errorSurface.maintenanceProgress", {
-      percent: new Intl.NumberFormat(locale, {
+      percent: numberFormat(locale, {
         style: "percent",
         maximumFractionDigits: 0
       }).format(Math.max(0, Math.min(100, maintenanceProgress)) / 100)

package/dist/components/layout/index.d.ts

@@ -49,6 +49,8 @@ export { MasterDetail } from "./master-detail.js";
 export type { MasterDetailProps } from "./master-detail.js";
 export { SplitPane } from "./split-pane.js";
 export type { SplitPaneProps } from "./split-pane.js";
+export { DraggablePanel } from "./draggable-panel.js";
+export type { DraggablePanelProp, DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DragAxisProp, DragBoundsProp, } from "./draggable-panel.js";
 export { Separator } from "./separator.js";
 export type { SeparatorProp, SeparatorProps } from "./separator.js";
 export { AspectRatio } from "./aspect-ratio.js";

package/dist/components/layout/index.js

@@ -22,6 +22,7 @@ import { TopbarItem } from "./topbar-item.js";
 import { ResponsiveGrid } from "./responsive-grid.js";
 import { MasterDetail } from "./master-detail.js";
 import { SplitPane } from "./split-pane.js";
+import { DraggablePanel } from "./draggable-panel.js";
 import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
 import { LegalDocumentShell } from "./legal-document-shell.js";
@@ -40,6 +41,7 @@ export {
   AuthStack,
   Breadcrumb,
   CenteredShell,
+  DraggablePanel,
   ErrorSurface,
   Flex,
   LegalDocumentShell,

package/dist/components/navigation/conversations.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import type { ConversationsProp } from "../../props/components/navigation.prop.js";
+export type { ConversationsProp, ConversationsProp as ConversationsProps, ConversationsItemProp, ConversationsDividerProp, ConversationsEntryProp, ConversationsMenuProp, ConversationsMenuItemProp, ConversationsGroupableProp, ConversationsCreationProp, } from "../../props/components/navigation.prop.js";
+/**
+ * Conversations — the session rail of a chat surface (Ant Design X `Conversations`).
+ *
+ * ## What is ported, and the one half that is deliberately not
+ *
+ * Every prop a caller passes keeps Ant X's spelling and semantics: `items` (conversations and
+ * `{ type: "divider" }` rules), `activeKey` / `defaultActiveKey` / `onActiveChange`, `menu` (flat
+ * or per-row), `groupable` (with `label`, `collapsible` and the `expandedKeys` triad) and
+ * `creation`. The two knobs left out are `styles` / `classNames` — the semantic style maps — and
+ * they are left out by a standing decision of this repository, not by omission: a free-form style
+ * hole freezes internal DOM slot names into public API and is unmeasurable by the audit
+ * (docs/WHAT-BELONGS-HERE.md · "Lỗ kiểu dáng tự do"; docs/DESIGN-AUTHORITY.md · "A knob that only
+ * a fork could reach is not parity either"). The rail is retuned through
+ * `src/tokens/components/conversations.css` instead. `prefixCls`, `rootClassName`,
+ * `menu.getPopupContainer`, `menu.trigger` and `shortcutKeys` are out for the same reason or
+ * because the subsystem behind them does not exist here (see the PR for the per-prop ledger).
+ *
+ * ## What this adds, because Ant X's rail has no keyboard model at all
+ *
+ * Measured in `@ant-design/x@2.9.0`: `es/conversations/Item.js` renders a bare
+ * `<li title … onClick>`. No `role`, no `tabIndex`, no key handling — the rail is unreachable by
+ * keyboard, and a screen reader meets twelve list items with no hint that any of them is a
+ * control or that one of them is current. Neither is the hand-rolled alternative the issue
+ * describes (a stack of `Button`s) any better on the axis that matters: it is one tab stop PER
+ * conversation.
+ *
+ * So the rows here are real `Button`s under ONE roving tabindex, the APG composite-widget rule:
+ *
+ * - the whole rail — group headings included — is a single tab stop;
+ * - `↑` / `↓` walk it and wrap, `Home` / `End` jump to its ends;
+ * - the logical FORWARD arrow (`→` in LTR, `←` in RTL) steps from a row onto its overflow menu,
+ *   and the backward arrow steps back, so a row's second action costs no extra tab stop;
+ * - the current conversation carries `aria-current="true"`, which is what makes "current" survive
+ *   a theme that does not tint (WCAG 1.4.1 — never colour alone).
+ */
+export declare const Conversations: React.ForwardRefExoticComponent<ConversationsProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/navigation/conversations.js

@@ -0,0 +1,371 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, MoreHorizontal, Plus } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { formatDate } from "../../lib/datetime/format-date.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { Separator } from "../layout/separator.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./dropdown-menu.js";
+function isDivider(entry) {
+  return "type" in entry && entry.type === "divider";
+}
+function isRtl(element) {
+  return element?.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+}
+function toSections(items, groupable) {
+  const collapsibleOption = typeof groupable === "object" ? groupable.collapsible : void 0;
+  const sections = [];
+  for (const entry of items) {
+    const group = !groupable || isDivider(entry) ? void 0 : entry.group;
+    if (group === void 0) {
+      const tail = sections[sections.length - 1];
+      if (tail && tail.group === void 0) {
+        tail.entries.push(entry);
+        continue;
+      }
+      sections.push({ entries: [entry], collapsible: false });
+      continue;
+    }
+    const existing = sections.find((section) => section.group === group);
+    if (existing) {
+      existing.entries.push(entry);
+      continue;
+    }
+    sections.push({
+      group,
+      entries: [entry],
+      collapsible: typeof collapsibleOption === "function" ? collapsibleOption(group) : collapsibleOption ?? false
+    });
+  }
+  return sections;
+}
+const groupNavKey = (group) => `group:${group}`;
+const rowNavKey = (key) => `row:${key}`;
+const Conversations = React.forwardRef(
+  ({
+    items = [],
+    activeKey,
+    defaultActiveKey,
+    onActiveChange,
+    menu,
+    groupable,
+    creation,
+    label,
+    id,
+    className,
+    ...rest
+  }, ref) => {
+    const { t } = useTranslation();
+    const rootRef = React.useRef(null);
+    const setRootRef = React.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const [uncontrolledActive, setUncontrolledActive] = React.useState(defaultActiveKey);
+    const mergedActiveKey = activeKey ?? uncontrolledActive;
+    const sections = React.useMemo(() => toSections(items, groupable), [items, groupable]);
+    const groupOptions = typeof groupable === "object" ? groupable : {};
+    const collapsibleGroups = React.useMemo(
+      () => sections.filter((section) => section.collapsible && section.group).map((s) => s.group),
+      [sections]
+    );
+    const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(() => [
+      ...groupOptions.defaultExpandedKeys ?? collapsibleGroups
+    ]);
+    const expandedKeys = groupOptions.expandedKeys ? [...groupOptions.expandedKeys] : uncontrolledExpanded;
+    const toggleGroup = (group) => {
+      const next = expandedKeys.includes(group) ? expandedKeys.filter((key) => key !== group) : [...expandedKeys, group];
+      if (!groupOptions.expandedKeys) setUncontrolledExpanded(next);
+      groupOptions.onExpand?.(next);
+    };
+    const navKeys = [];
+    for (const section of sections) {
+      if (section.group && section.collapsible) {
+        navKeys.push(groupNavKey(section.group));
+        if (!expandedKeys.includes(section.group)) continue;
+      }
+      for (const entry of section.entries) {
+        if (!isDivider(entry) && !entry.disabled) navKeys.push(rowNavKey(entry.key));
+      }
+    }
+    const [focusKey, setFocusKey] = React.useState(null);
+    const activeNavKey = mergedActiveKey ? rowNavKey(mergedActiveKey) : void 0;
+    const tabStop = focusKey && navKeys.includes(focusKey) ? focusKey : activeNavKey && navKeys.includes(activeNavKey) ? activeNavKey : navKeys[0];
+    const nodes = React.useRef(/* @__PURE__ */ new Map());
+    const registerNode = (key) => (node) => {
+      if (node) nodes.current.set(key, node);
+      else nodes.current.delete(key);
+    };
+    const moveTo = (key) => {
+      if (!key) return;
+      setFocusKey(key);
+      nodes.current.get(key)?.focus();
+    };
+    const step = (from, delta) => {
+      if (navKeys.length === 0) return;
+      const index = navKeys.indexOf(from);
+      const next = index === -1 ? 0 : (index + delta + navKeys.length) % navKeys.length;
+      moveTo(navKeys[next]);
+    };
+    const handleNavKeyDown = (navKey) => (event) => {
+      const rtl = isRtl(event.currentTarget);
+      const forward = rtl ? "ArrowLeft" : "ArrowRight";
+      const backward = rtl ? "ArrowRight" : "ArrowLeft";
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          step(navKey, 1);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          step(navKey, -1);
+          return;
+        case "Home":
+          event.preventDefault();
+          moveTo(navKeys[0]);
+          return;
+        case "End":
+          event.preventDefault();
+          moveTo(navKeys[navKeys.length - 1]);
+          return;
+        case forward: {
+          const trigger = nodes.current.get(`menu:${navKey}`);
+          if (!trigger) return;
+          event.preventDefault();
+          trigger.focus();
+          return;
+        }
+        case backward: {
+          if (!navKey.startsWith("menu:")) return;
+          event.preventDefault();
+          moveTo(navKey.slice("menu:".length));
+          return;
+        }
+        default:
+      }
+    };
+    const selectConversation = (item) => {
+      if (item.disabled) return;
+      if (activeKey === void 0) setUncontrolledActive(item.key);
+      onActiveChange?.(
+        item.key,
+        items.find((entry) => !isDivider(entry) && entry.key === item.key)
+      );
+    };
+    const menuFor = (item) => {
+      const resolved = typeof menu === "function" ? menu(item) : menu;
+      return resolved && resolved.items.length > 0 ? resolved : void 0;
+    };
+    const renderEntry = (entry, index) => {
+      if (isDivider(entry)) {
+        return /* @__PURE__ */ jsx("li", { className: "ui-conversations-rule", children: /* @__PURE__ */ jsx(
+          Separator,
+          {
+            "data-dashed": entry.dashed ? "true" : void 0,
+            className: "ui-conversations-separator"
+          }
+        ) }, entry.key ?? `divider-${index}`);
+      }
+      const navKey = rowNavKey(entry.key);
+      const active = mergedActiveKey === entry.key;
+      const rowMenu = entry.disabled ? void 0 : menuFor(entry);
+      const labelText = typeof entry.label === "string" ? entry.label : entry.key;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "data-slot": "conversations-item",
+          "data-active": active ? "true" : void 0,
+          className: "ui-conversations-item",
+          children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                ref: registerNode(navKey),
+                type: "button",
+                variant: "ghost",
+                fullWidth: true,
+                align: "start",
+                disabled: entry.disabled,
+                "aria-current": active ? "true" : void 0,
+                tabIndex: tabStop === navKey ? 0 : -1,
+                className: "ui-conversations-row",
+                onFocus: () => setFocusKey(navKey),
+                onClick: () => selectConversation(entry),
+                onKeyDown: handleNavKeyDown(navKey),
+                children: [
+                  entry.icon ? /* @__PURE__ */ jsx("span", { className: "ui-conversations-icon", "aria-hidden": "true", children: entry.icon }) : null,
+                  /* @__PURE__ */ jsxs("span", { className: "ui-conversations-line", children: [
+                    /* @__PURE__ */ jsx(Text, { truncate: true, children: entry.label }),
+                    entry.timestamp === void 0 ? null : (
+                      /*
+                       * Through `formatDate`, never through `toLocaleString` or a sliced ISO string.
+                       * `docs/DATETIME.md` rule 1 forbids the alternatives for a measured reason: the
+                       * tenant's locale, timezone and 12/24h choice live in AppProvider, so the same
+                       * epoch has to read 2026/03/15 in a Japanese tenant and 15/03/2026 in a
+                       * Vietnamese one. A component that formats its own dates cannot do that.
+                       */
+                      /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", tabular: true, className: "ui-conversations-timestamp", children: formatDate(new Date(entry.timestamp)) })
+                    )
+                  ] })
+                ]
+              }
+            ),
+            rowMenu ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ref: registerNode(`menu:${navKey}`),
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  tabIndex: -1,
+                  className: "ui-conversations-menu-trigger",
+                  "aria-label": rowMenu.triggerLabel?.(entry) ?? t("navigation.conversations.rowActions", { label: labelText }),
+                  onKeyDown: handleNavKeyDown(`menu:${navKey}`),
+                  children: /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: rowMenu.items.map((command) => /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  disabled: command.disabled,
+                  variant: command.danger ? "destructive" : void 0,
+                  onSelect: () => rowMenu.onClick?.({ key: command.key, conversation: entry }),
+                  children: [
+                    command.icon,
+                    command.label
+                  ]
+                },
+                command.key
+              )) })
+            ] }) : null
+          ]
+        },
+        entry.key
+      );
+    };
+    const railLabel = label ?? t("navigation.conversations.label");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setRootRef,
+        id,
+        "data-slot": "conversations",
+        className: cn("ui-conversations", className),
+        ...rest,
+        children: [
+          creation ? /* @__PURE__ */ jsx(CreationButton, { creation }) : null,
+          sections.map((section, sectionIndex) => {
+            if (!section.group) {
+              return /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  "aria-label": railLabel,
+                  className: "ui-conversations-list",
+                  children: section.entries.map(renderEntry)
+                },
+                `run-${sectionIndex}`
+              );
+            }
+            const heading = typeof groupOptions.label === "function" ? groupOptions.label(section.group) : groupOptions.label ?? section.group;
+            const navKey = groupNavKey(section.group);
+            const expanded = expandedKeys.includes(section.group);
+            const listId = `${id ?? "ui-conversations"}-${section.group}`;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-slot": "conversations-group",
+                className: "ui-conversations-group",
+                children: [
+                  section.collapsible ? /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      ref: registerNode(navKey),
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      fullWidth: true,
+                      align: "start",
+                      "aria-expanded": expanded,
+                      "aria-controls": listId,
+                      tabIndex: tabStop === navKey ? 0 : -1,
+                      className: "ui-conversations-group-trigger",
+                      onFocus: () => setFocusKey(navKey),
+                      onClick: () => toggleGroup(section.group),
+                      onKeyDown: handleNavKeyDown(navKey),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          ChevronDown,
+                          {
+                            "aria-hidden": "true",
+                            className: "ui-conversations-group-chevron",
+                            "data-expanded": expanded ? "true" : void 0
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", weight: "medium", truncate: true, children: heading })
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "xs",
+                      tone: "muted",
+                      weight: "medium",
+                      className: "ui-conversations-group-label",
+                      children: heading
+                    }
+                  ),
+                  section.collapsible && !expanded ? null : /* @__PURE__ */ jsx(
+                    "ul",
+                    {
+                      id: listId,
+                      "aria-label": typeof heading === "string" ? heading : section.group,
+                      className: "ui-conversations-list",
+                      children: section.entries.map(renderEntry)
+                    }
+                  )
+                ]
+              },
+              section.group
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+Conversations.displayName = "Conversations";
+function CreationButton({ creation }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      fullWidth: true,
+      align: "start",
+      disabled: creation.disabled,
+      className: "ui-conversations-creation",
+      onClick: () => creation.onClick?.(),
+      children: [
+        creation.icon ?? /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }),
+        creation.label ?? t("navigation.conversations.creation")
+      ]
+    }
+  );
+}
+export {
+  Conversations
+};

package/dist/components/navigation/index.d.ts

@@ -9,3 +9,5 @@ export { AppSettingToggle } from "./app-setting-toggle.js";
 export type { AppSettingToggleProp, AppSettingToggleProps, AppSettingToggleKind, } from "./app-setting-toggle.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
+export { Conversations } from "./conversations.js";
+export type { ConversationsProp, ConversationsProps, ConversationsItemProp, ConversationsDividerProp, ConversationsEntryProp, ConversationsMenuProp, ConversationsMenuItemProp, ConversationsGroupableProp, ConversationsCreationProp, } from "./conversations.js";