prime-ui-kit 0.12.0 → 0.13.0

package/README.md

@@ -6,7 +6,7 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
 
 **A calm, precise React 19 UI kit for product interfaces** — admin panels, dashboards, settings, forms
-and data tables. 78 components on one design contract, one API vocabulary and one set of tokens, so
+and data tables. 79 components on one design contract, one API vocabulary and one set of tokens, so
 every screen you build looks like it was drawn by the same hand.
 
 - **Graphite design language.** Depth from fill, not lines — a surface ladder where every nested
@@ -249,6 +249,7 @@ accessibility, examples and common mistakes.
 | [**VoicePlayer**](https://github.com/esurkov1/prime-ui/blob/main/src/components/voice-player/COMPONENT.md) | A voice message player: a round play disk, a waveform that is the seek slider, and the time with the playback speed; one sound at a time, `getWaveform` for audio without levels. |
 | [**VideoNote**](https://github.com/esurkov1/prime-ui/blob/main/src/components/video-note/COMPONENT.md) | A round video message: a still first frame with the play disk, played with sound on a press; the same player API as VoicePlayer — transcript, transfer either way, one sound at a time. |
 | [**Composer**](https://github.com/esurkov1/prime-ui/blob/main/src/components/composer/COMPONENT.md) | The message input of a chat: a growing field, Enter to send, attachments, reply / edit bar, Markdown formatting, voice and video messages with pause, the typing signal. |
+| [**ChatList**](https://github.com/esurkov1/prime-ui/blob/main/src/components/chat-list/COMPONENT.md) | The conversation list of a messenger: avatars with presence, names, times, the last message with its author or media word, unread / muted / mention counts, typing and drafts, a row menu, search, rows that glide to a new order, long lists rendered around the view. |
 
 ### Status and loading (`status`)
 
@@ -337,6 +338,7 @@ accessibility, examples and common mistakes.
 | `getPasswordStrength(value)` | The kit's 0–4 password estimate behind `Input.Root strength`; replace it with `getStrength`. |
 | `useUploadQueue({ upload, concurrency })` | The upload queue behind FileUpload `queue`: your `upload(file, { signal, onProgress })` runs a few at a time, with progress, abort on remove and retry. |
 | `groupMessages`, `formatMessageDate`, `formatMessageTime`, `hueOf` | Chat data → dated runs of one author (`Chat.Messages items` runs it for you), the date and time labels, and a palette hue stable per person. |
+| `formatChatTime(date, now)` | The time of a dialog's last message as `ChatList` shows it: «14:32» today, «пн» this week, «12 мар», «12.03.2025». |
 | `getWaveform` | The 0…1 levels of a recorded voice message (a `Blob` or a URL) for `VoicePlayer waveform`, decoded with the Web Audio API. |
 | `moveBefore(items, id, beforeId, getId)` | Applies a `Dnd` or DataTable `onReorder` to your array. |
 | `matchesSmartFilter`, `resolveSmartFilterValues` | Apply a SmartFilter value to your rows. |

package/dist/chunks/{chunk-VOZ7J72X.js → chunk-E6SQBSDF.js}

@@ -1095,6 +1095,8 @@ var iconRegistry = {
   "format.link": Link2,
   "format.list": List,
   "format.quote": TextQuote,
+  /** Hidden text (a spoiler) in text formatting; `field.password.hide` masks a password. */
+  "format.spoiler": EyeOff,
   "format.strikethrough": Strikethrough,
   "format.underline": Underline,
   "object.activity": Activity,
@@ -5939,6 +5941,7 @@ var Select_default = {
   search: "Select_search",
   group: "Select_group",
   separator: "Select_separator",
+  actions: "Select_actions",
   item: "Select_item",
   itemText: "Select_itemText",
   itemTitle: "Select_itemTitle",
@@ -6174,6 +6177,59 @@ function SelectItem({
   );
 }
 SelectItem.displayName = "Select.Item";
+var ACTION_PREFIX = "__prime_select_action";
+var isActionValue = (value) => value.startsWith(ACTION_PREFIX);
+function SelectAction({
+  onSelect,
+  disabled = false,
+  className,
+  children,
+  onClick: onClick2,
+  onMouseMove,
+  ref,
+  ...rest
+}) {
+  const { highlight, listboxId, setOpen, size } = useSelectContext();
+  const value = `${ACTION_PREFIX}${React50.useId()}`;
+  const isHighlighted = useStoreSlice(highlight, (current) => current === value);
+  const parts = splitItemChildren(children);
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the listbox / search (aria-activedescendant)
+    // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard is handled on the listbox
+    /* @__PURE__ */ jsxs25(
+      "div",
+      {
+        ...rest,
+        ref,
+        id: optionDomId(listboxId, value),
+        role: "option",
+        "aria-disabled": disabled || void 0,
+        className: cx(menu_default.item, className),
+        onClick: (event) => {
+          onClick2?.(event);
+          if (event.defaultPrevented || disabled) return;
+          onSelect();
+          setOpen(false);
+        },
+        onMouseMove: (event) => {
+          onMouseMove?.(event);
+          if (!disabled && !isHighlighted) highlight.set(value);
+        },
+        ...toDataAttributes({
+          value,
+          action: true,
+          highlighted: isHighlighted,
+          disabled
+        }),
+        children: [
+          sizeMedia(parts.leading, size),
+          /* @__PURE__ */ jsx38("span", { className: Select_default.itemText, children: parts.body })
+        ]
+      }
+    )
+  );
+}
+SelectAction.displayName = "Select.Action";
 
 // src/components/select/Select.tsx
 import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -6184,7 +6240,8 @@ var SELECT_LABELS = {
   loading: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026",
   retry: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C",
   clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
-  optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E"
+  optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
+  changeFailed: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u0432\u044B\u0431\u043E\u0440"
 };
 function SelectRoot(props) {
   const {
@@ -6227,11 +6284,30 @@ function SelectRoot(props) {
   const disabled = useInheritedDisabled(disabledProp);
   const labels = React51.useMemo(() => ({ ...SELECT_LABELS, ...labelsProp }), [labelsProp]);
   const ids = useFieldFrame(id, { hint, error, invalid });
-  const [value, setValue] = useControllableState({
+  const [stored, setStored] = useControllableState({
     value: props.value,
-    defaultValue: props.defaultValue ?? (multiple ? [] : void 0),
-    onChange: props.onValueChange
+    defaultValue: props.defaultValue ?? (multiple ? [] : void 0)
   });
+  const changes = usePendingChanges(stored, takeNext);
+  const value = changes.shown;
+  const saving = changes.pending.length > 0;
+  const [announcement, setAnnouncement] = React51.useState("");
+  const onValueChange = props.onValueChange;
+  const commit = (next) => {
+    if (saving || Object.is(next, value)) return;
+    const outcome = onValueChange?.(next);
+    if (!isPromiseLike(outcome)) {
+      setStored(next);
+      return;
+    }
+    setAnnouncement("");
+    changes.track(next, outcome, {
+      onResolve: () => setStored(next),
+      onReject: () => setAnnouncement(labels.changeFailed)
+    });
+  };
+  const commitRef = React51.useRef(commit);
+  commitRef.current = commit;
   const selected = React51.useMemo(
     () => Array.isArray(value) ? value : value ? [value] : [],
     [value]
@@ -6257,18 +6333,18 @@ function SelectRoot(props) {
   const pick = React51.useCallback(
     (optionValue) => {
       if (multiple) {
-        setValue((prev) => {
-          const list = Array.isArray(prev) ? prev : [];
-          return list.includes(optionValue) ? list.filter((item) => item !== optionValue) : [...list, optionValue];
-        });
+        const list = Array.isArray(value) ? value : [];
+        commitRef.current(
+          list.includes(optionValue) ? list.filter((item) => item !== optionValue) : [...list, optionValue]
+        );
         return;
       }
-      setValue(optionValue);
+      commitRef.current(optionValue);
       setOpen(false);
     },
-    [multiple, setValue, setOpen]
+    [multiple, value, setOpen]
   );
-  const clear = React51.useCallback(() => setValue(multiple ? [] : ""), [multiple, setValue]);
+  const clear = React51.useCallback(() => commitRef.current(multiple ? [] : ""), [multiple]);
   const context = React51.useMemo(
     () => ({
       size,
@@ -6284,6 +6360,7 @@ function SelectRoot(props) {
       clear,
       clearable,
       loading,
+      saving,
       loadingMore,
       hasMore,
       onLoadMore,
@@ -6317,6 +6394,7 @@ function SelectRoot(props) {
       clear,
       clearable,
       loading,
+      saving,
       loadingMore,
       hasMore,
       onLoadMore,
@@ -6347,12 +6425,14 @@ function SelectRoot(props) {
       className,
       children: [
         /* @__PURE__ */ jsx39(SelectProvider, { value: context, children: /* @__PURE__ */ jsx39(ControlSizeProvider, { value: size, children }) }),
-        name ? (selected.length > 0 || multiple ? selected : [""]).map((item) => /* @__PURE__ */ jsx39("input", { type: "hidden", name, value: item, disabled }, item)) : null
+        name ? (selected.length > 0 || multiple ? selected : [""]).map((item) => /* @__PURE__ */ jsx39("input", { type: "hidden", name, value: item, disabled }, item)) : null,
+        /* @__PURE__ */ jsx39(VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement })
       ]
     }
   );
 }
 SelectRoot.displayName = "Select.Root";
+var takeNext = (_current, next) => next;
 function SelectTrigger({
   className,
   children,
@@ -6375,13 +6455,15 @@ function SelectTrigger({
     describedBy,
     triggerRef,
     loading,
+    saving,
     clearable,
     selected,
     clear,
     labels
   } = useSelectContext();
   const mergedRef = useMergedRefs(triggerRef, ref);
-  const showClear = clearable && selected.length > 0 && !disabled && !loading;
+  const busy = loading || saving;
+  const showClear = clearable && selected.length > 0 && !disabled && !busy;
   return /* @__PURE__ */ jsxs26(
     "button",
     {
@@ -6396,7 +6478,7 @@ function SelectTrigger({
       "aria-invalid": invalid || void 0,
       "aria-required": required || void 0,
       "aria-describedby": [ariaDescribedBy, describedBy].filter(Boolean).join(" ") || void 0,
-      "aria-busy": loading || void 0,
+      "aria-busy": busy || void 0,
       disabled,
       className: cx(fieldTriggerClass, Select_default.trigger, className),
       onClick: (event) => {
@@ -6418,7 +6500,7 @@ function SelectTrigger({
         state: isOpen ? "open" : "closed",
         size,
         invalid: invalid || void 0,
-        loading: loading || void 0,
+        loading: busy || void 0,
         disabled: disabled || void 0,
         "focus-ring": focusRing ? void 0 : false
       }),
@@ -6443,7 +6525,7 @@ function SelectTrigger({
             }
           )
         ) : null,
-        /* @__PURE__ */ jsx39("span", { className: Select_default.chevron, "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx39(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx39(Icon, { name: "nav.chevronDown" }) })
+        /* @__PURE__ */ jsx39("span", { className: Select_default.chevron, "aria-hidden": "true", children: busy ? /* @__PURE__ */ jsx39(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx39(Icon, { name: "nav.chevronDown" }) })
       ]
     }
   );
@@ -6516,6 +6598,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     query,
     setQuery,
     loading,
+    saving,
     loadingMore,
     hasMore,
     onLoadMore,
@@ -6526,6 +6609,12 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     registry
   } = useSelectContext();
   const listboxRef = React51.useRef(null);
+  const items = [];
+  const actions = [];
+  for (const child of React51.Children.toArray(children)) {
+    (React51.isValidElement(child) && child.type === SelectAction ? actions : items).push(child);
+  }
+  const actionsId = `${listboxId}-actions`;
   const floating = useFloatingLayer({
     open: isOpen,
     onOpenChange: setOpen,
@@ -6567,20 +6656,27 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     }
     const inSearch = event.target instanceof HTMLInputElement;
     if (inSearch && [" ", "Home", "End"].includes(event.key)) return;
-    const items = enabledOptions(listboxRef.current);
+    const stops = enabledOptions(panelRef.current);
     const printable = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
     if (printable && !inSearch && (event.key !== " " || typeahead.isTyping())) {
       event.preventDefault();
-      const match = typeahead.find(event.key, items, highlight.get());
+      const match = typeahead.find(event.key, stops, highlight.get());
       if (match) {
         highlight.set(match.dataset.value);
         match.scrollIntoView?.({ block: "nearest" });
       }
       return;
     }
-    handleListboxKeyDown(event, { items, highlight, onSelect: pick });
+    handleListboxKeyDown(event, {
+      items: stops,
+      highlight,
+      onSelect: (value) => {
+        if (isActionValue(value)) document.getElementById(optionDomId(listboxId, value))?.click();
+        else pick(value);
+      }
+    });
   };
-  if (!floating.mounted) return /* @__PURE__ */ jsx39("div", { hidden: true, children });
+  if (!floating.mounted) return /* @__PURE__ */ jsx39("div", { hidden: true, children: items });
   const activeDescendant = isOpen && highlighted !== void 0 ? optionDomId(listboxId, highlighted) : void 0;
   return /* @__PURE__ */ jsxs26(
     FloatingPanel,
@@ -6624,13 +6720,14 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
             "aria-multiselectable": multiple || void 0,
             "aria-labelledby": triggerId,
             "aria-activedescendant": searchable ? void 0 : activeDescendant,
-            "aria-busy": loading || loadingMore || void 0,
+            "aria-busy": loading || loadingMore || saving || void 0,
+            "aria-owns": actions.length > 0 && region !== "error" ? actionsId : void 0,
             tabIndex: -1,
             hidden: region === "error" ? true : void 0,
             "data-autofocus": searchable || region === "error" ? void 0 : "",
             className: cx(Select_default.listbox, swapClass),
             children: [
-              children,
+              items,
               region === "loading" ? /* @__PURE__ */ jsx39(SkeletonRows, { count: LOADING_ROWS2 }) : null,
               region === "ready" && hasMore ? /* @__PURE__ */ jsx39("div", { ref: sentinelRef, "aria-hidden": "true", className: menu_default.loadSentinel }) : null,
               region === "ready" && loadingMore ? /* @__PURE__ */ jsx39(SkeletonRows, { count: LOADING_MORE_ROWS }) : null
@@ -6642,6 +6739,12 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
           /* @__PURE__ */ jsx39(EmptyPage.Title, { as: "p", children: labels.empty }),
           query !== "" && labels.emptyHint ? /* @__PURE__ */ jsx39(EmptyPage.Description, { children: labels.emptyHint }) : null
         ] }) : null,
+        actions.length > 0 && region !== "error" ? (
+          // Owned by the listbox (`aria-owns`): its options for assistive tech, pinned under the
+          // scroller and the empty state for the eye.
+          // biome-ignore lint/a11y/useSemanticElements: a group of options inside a listbox, not a form fieldset
+          /* @__PURE__ */ jsx39("div", { id: actionsId, role: "group", className: Select_default.actions, children: actions })
+        ) : null,
         region === "error" ? /* @__PURE__ */ jsxs26(EmptyPage.Root, { layout: "compact", size, role: "alert", className: swapClass, children: [
           /* @__PURE__ */ jsx39(EmptyPage.Title, { as: "p", children: loadError }),
           onRetry ? /* @__PURE__ */ jsx39(EmptyPage.Actions, { children: /* @__PURE__ */ jsxs26(Button.Root, { variant: "soft", tone: "neutral", onClick: onRetry, children: [
@@ -6650,7 +6753,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
           ] }) }) : null
         ] }) : null,
         /* @__PURE__ */ jsx39(VisuallyHidden, { "aria-live": "polite", children: loading || loadingMore ? labels.loading : "" }),
-        /* @__PURE__ */ jsx39(HighlightOnOpen, { listboxRef, highlight })
+        /* @__PURE__ */ jsx39(HighlightOnOpen, { listboxRef, panelRef, highlight })
       ]
     }
   );
@@ -6658,6 +6761,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
 SelectContent.displayName = "Select.Content";
 function HighlightOnOpen({
   listboxRef,
+  panelRef,
   highlight
 }) {
   const { isOpen, query, selected, registry } = useSelectContext();
@@ -6673,15 +6777,15 @@ function HighlightOnOpen({
     return () => highlight.set(void 0);
   }, [isOpen, listboxRef, highlight]);
   React51.useLayoutEffect(() => {
-    if (query !== "") highlight.set(enabledOptions(listboxRef.current)[0]?.dataset.value);
-  }, [query, listboxRef, highlight]);
+    if (query !== "") highlight.set(enabledOptions(panelRef.current)[0]?.dataset.value);
+  }, [query, panelRef, highlight]);
   React51.useLayoutEffect(() => {
     if (query === "") return;
     const options = enabledOptions(listboxRef.current);
     if (!options.some((item) => item.dataset.value === highlight.get())) {
-      highlight.set(options[0]?.dataset.value);
+      highlight.set((options[0] ?? enabledOptions(panelRef.current)[0])?.dataset.value);
     }
-  }, [version, query, listboxRef, highlight]);
+  }, [version, query, listboxRef, panelRef, highlight]);
   return null;
 }
 function SelectGroup({ className, ...rest }) {
@@ -6704,7 +6808,8 @@ var Select = {
   ItemDescription: SelectItemDescription,
   ItemMeta: SelectItemMeta,
   Group: SelectGroup,
-  Separator: SelectSeparator
+  Separator: SelectSeparator,
+  Action: SelectAction
 };
 
 export {