@apliteni/apliteni-ui 0.56.0 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -28,7 +28,7 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
-Components: `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Callout`, `Icon`.
+Components: `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Card`, `Callout`, `Icon`.
 
 `Snippet` accepts `label`, `code`, `reveal`, and `copyLabel` props. It treats `code`
 as plain text and copies it exactly as provided. After a successful clipboard write,
@@ -501,3 +501,11 @@ AppShell includes the kit’s rail and top band. Pass the current router pathnam
   <Reports />
 </AppShell>
 ```
+
+## Tooltip
+
+Tooltip accepts text and inline children, without nested controls. Hovering or focusing opens it; pressing Escape, moving focus away, or moving the mouse away closes it. On touch devices, tapping toggles it. It uses the kit’s tooltip styles and moves below the trigger when there is not enough space above. Keep the same information elsewhere on the page.
+
+```tsx
+<Tooltip text="Updated daily">Balance</Tooltip>
+```

package/react/dist/index.css

@@ -68,6 +68,8 @@
   border-bottom: 1px solid var(--border);
 }
 .rx-modal__title {
+  margin: 0;
+  font-family: var(--font-sans);
   font-weight: var(--weight-normal);
   font-size: var(--text-base);
   color: var(--text);
@@ -668,3 +670,54 @@
   align-items: center;
   gap: var(--space-3);
 }
+
+/* ../src/styles/tooltip.css */
+.ui-tip-host {
+  position: relative;
+}
+.ui-tip {
+  --ui-tip-gap: 8px;
+  --ui-tip-bg: var(--bg-elevated);
+  position: absolute;
+  top: var(--ui-tip-y, 0px);
+  left: var(--ui-tip-x, 50%);
+  z-index: var(--z-dropdown);
+  translate: calc(-50% + var(--ui-tip-shift, 0px)) calc(-100% - var(--ui-tip-gap));
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  max-width: var(--prose-caption);
+  padding: var(--space-2) var(--space-3);
+  background: var(--ui-tip-bg);
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  line-height: 1.45;
+  color: var(--text);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--dur-fast) var(--ease), visibility var(--dur-fast) linear;
+}
+.ui-tip.is-below {
+  translate: calc(-50% + var(--ui-tip-shift, 0px)) var(--ui-tip-gap);
+}
+.ui-tip.is-open {
+  opacity: 1;
+  visibility: visible;
+}
+.ui-tip__label {
+  color: var(--text);
+}
+.ui-tip__value {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+  color: var(--strong);
+  font-variant-numeric: tabular-nums;
+}
+.ui-tip__detail {
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}

package/react/dist/index.d.ts

@@ -14,6 +14,8 @@ type ButtonProps = {
     block?: boolean;
     /** In flight: keeps focus, blocks activation, announces progress, and shows dots. */
     busy?: boolean;
+    /** Message after busy ends; an empty string leaves outcome announcements to the caller. */
+    completionMessage?: string;
     children?: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 declare const Button: react.ForwardRefExoticComponent<{
@@ -25,6 +27,8 @@ declare const Button: react.ForwardRefExoticComponent<{
     block?: boolean;
     /** In flight: keeps focus, blocks activation, announces progress, and shows dots. */
     busy?: boolean;
+    /** Message after busy ends; an empty string leaves outcome announcements to the caller. */
+    completionMessage?: string;
     children?: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
@@ -608,7 +612,14 @@ type ThemeToggleProps = {
 };
 declare function ThemeToggle({ labelled }: ThemeToggleProps): react.JSX.Element;
 
+type TooltipProps = {
+    text: string;
+    /** Inline content without nested controls. */
+    children: ReactNode;
+};
+declare function Tooltip({ text, children }: TooltipProps): react.JSX.Element;
+
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, sortTableRows, useToast };
+export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -56,6 +56,7 @@ var Button = forwardRef(function Button2({
   iconOnly,
   block,
   busy,
+  completionMessage,
   children,
   type = "button",
   disabled,
@@ -83,7 +84,7 @@ var Button = forwardRef(function Button2({
     const prior = previous.current;
     if ((busy || prior?.busy) && (!prior || prior.text !== text2 || prior.busy !== busy)) {
       announcer.current ?? (announcer.current = acquireAnnouncer(buttonRef.current.ownerDocument));
-      announcer.current.announce(`${text2}: ${busy ? "in progress" : "complete"}`);
+      announcer.current.announce(busy ? `${text2}: in progress` : completionMessage ?? `${text2}: complete`);
     }
     previous.current = { text: text2, busy };
   });
@@ -472,7 +473,7 @@ function Modal({ open, title, onClose, footer, children, initialFocusRef, role =
         ref: panel,
         children: [
           /* @__PURE__ */ jsxs5("div", { className: "rx-modal__head", children: [
-            /* @__PURE__ */ jsx7("div", { className: "rx-modal__title", id: titleId, children: title }),
+            /* @__PURE__ */ jsx7("h2", { className: "rx-modal__title", id: titleId, children: title }),
             /* @__PURE__ */ jsx7(Button, { variant: "ghost", size: "sm", iconOnly: true, icon: "x", "aria-label": "Close", onClick: onClose })
           ] }),
           /* @__PURE__ */ jsx7("div", { className: "rx-modal__body", id: bodyId, ref: body, children }),
@@ -1943,6 +1944,9 @@ function Timeline({ events, className, ...rest }) {
 import { useEffect as useEffect8, useId as useId8, useRef as useRef13, useState as useState7 } from "react";
 import { esc, icon as icon4 } from "@apliteni/apliteni-ui";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+function messages(id, hint, error) {
+  return [error && `${id}-error`, hint && `${id}-hint`].filter(Boolean).join(" ") || void 0;
+}
 function Frame({ id, label, hint, error, required, children }) {
   return /* @__PURE__ */ jsxs19("div", { className: "ui-field", children: [
     /* @__PURE__ */ jsxs19("label", { className: "ui-field__label", htmlFor: id, children: [
@@ -1950,23 +1954,25 @@ function Frame({ id, label, hint, error, required, children }) {
       required && /* @__PURE__ */ jsx23("span", { className: "ui-field__req", "aria-hidden": "true", children: "*" })
     ] }),
     children,
-    (error || hint) && /* @__PURE__ */ jsx23(
+    error && /* @__PURE__ */ jsx23(
       "div",
       {
-        id: `${id}-message`,
-        className: error ? "ui-field__error" : "ui-field__hint",
-        dangerouslySetInnerHTML: { __html: (error ? icon4("alert") : "") + esc(error || hint) }
+        id: `${id}-error`,
+        className: "ui-field__error",
+        role: "alert",
+        dangerouslySetInnerHTML: { __html: icon4("alert") + esc(error) }
       }
-    )
+    ),
+    hint && /* @__PURE__ */ jsx23("div", { id: `${id}-hint`, className: "ui-field__hint", children: hint })
   ] });
 }
 function wiring(id, hint, error) {
-  return { id, "aria-describedby": error || hint ? `${id}-message` : void 0, "aria-invalid": error ? true : void 0 };
+  return { id, "aria-describedby": messages(id, hint, error), "aria-invalid": error ? true : void 0 };
 }
 function TextField({ label, hint, error, required, type = "text", unit, className = "", ...props }) {
   const id = useId8();
   const hasUnit = type === "number" && !!unit;
-  const describedBy = [error || hint ? `${id}-message` : "", hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
+  const describedBy = [messages(id, hint, error), hasUnit ? `${id}-unit` : ""].filter(Boolean).join(" ") || void 0;
   const control = /* @__PURE__ */ jsx23(
     "input",
     {
@@ -2074,7 +2080,7 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
 }
 
 // src/Toast.tsx
-import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect9, useRef as useRef14, useState as useState8 } from "react";
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect9, useLayoutEffect as useLayoutEffect4, useRef as useRef14, useState as useState8 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var Context = createContext2(null);
@@ -2169,18 +2175,40 @@ function Notice({ notice, remove }) {
     }
   );
 }
+var REACH = "--rx-toast-stack";
+function usePublishedReach(stack2, count) {
+  useLayoutEffect4(() => {
+    const element = stack2.current;
+    const view = element?.ownerDocument.defaultView;
+    const root = element?.ownerDocument.documentElement;
+    if (!element || !view || !root) return;
+    const publish = () => {
+      const box = element.getBoundingClientRect();
+      root.style.setProperty(REACH, `${box.height ? Math.round(view.innerHeight - box.top) : 0}px`);
+    };
+    publish();
+    const observer = typeof view.ResizeObserver === "function" ? new view.ResizeObserver(publish) : void 0;
+    observer?.observe(element);
+    return () => {
+      observer?.disconnect();
+      root.style.removeProperty(REACH);
+    };
+  }, [stack2, count]);
+}
 function Toast({ children }) {
   const [entries, setEntries] = useState8([]);
   const nextId = useRef14(0);
+  const stack2 = useRef14(null);
   const push = useCallback3((notice) => {
     const id = nextId.current++;
     const remove = () => setEntries((current) => current.filter((entry) => entry.id !== id));
     setEntries((current) => [...current, { id, notice, remove }]);
   }, []);
+  usePublishedReach(stack2, entries.length);
   return /* @__PURE__ */ jsxs20(Context.Provider, { value: push, children: [
     children,
     typeof document !== "undefined" && createPortal4(
-      /* @__PURE__ */ jsx24("div", { className: "ui-toast-stack rx-toast-stack", children: entries.map((entry) => /* @__PURE__ */ jsx24(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
+      /* @__PURE__ */ jsx24("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx24(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
       document.body
     )
   ] });
@@ -2439,6 +2467,106 @@ function ThemeToggle({ labelled = false }) {
   ] }) : button;
 }
 
+// src/Tooltip.tsx
+import { useEffect as useEffect11, useId as useId10, useLayoutEffect as useLayoutEffect5, useRef as useRef15, useState as useState10 } from "react";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+function Tooltip({ text: text2, children }) {
+  const id = useId10();
+  const host = useRef15(null);
+  const trigger = useRef15(null);
+  const tip = useRef15(null);
+  const ignoreMouseUntil = useRef15(0);
+  const touchMoved = useRef15(false);
+  const [open, setOpen] = useState10(false);
+  function place() {
+    const h = host.current;
+    const t = tip.current;
+    const mark = trigger.current.getBoundingClientRect();
+    const rect = h.getBoundingClientRect();
+    const view = h.ownerDocument.documentElement;
+    const clip = { top: 0, left: 0, right: view.clientWidth, bottom: view.clientHeight };
+    for (let el = h; el && el !== h.ownerDocument.body; el = el.parentElement) {
+      const style = getComputedStyle(el);
+      if (![style.overflow, style.overflowX, style.overflowY].some((v) => v && v !== "visible")) continue;
+      const bounds = el.getBoundingClientRect();
+      clip.top = Math.max(clip.top, bounds.top);
+      clip.left = Math.max(clip.left, bounds.left);
+      clip.right = Math.min(clip.right, bounds.right);
+      clip.bottom = Math.min(clip.bottom, bounds.bottom);
+    }
+    const gap = parseFloat(getComputedStyle(t).getPropertyValue("--ui-tip-gap")) || 8;
+    const above = mark.top - clip.top;
+    const below = clip.bottom - mark.bottom;
+    const isBelow = above < t.offsetHeight + gap && below > above;
+    t.classList.toggle("is-below", isBelow);
+    const centre = mark.left + mark.width / 2;
+    const ideal = centre - t.offsetWidth / 2;
+    const left = Math.max(clip.left, Math.min(ideal, clip.right - t.offsetWidth));
+    t.style.setProperty("--ui-tip-x", `${centre - rect.left - h.clientLeft + h.scrollLeft}px`);
+    t.style.setProperty("--ui-tip-y", `${(isBelow ? mark.bottom : mark.top) - rect.top - h.clientTop + h.scrollTop}px`);
+    t.style.setProperty("--ui-tip-shift", `${left - ideal}px`);
+  }
+  useLayoutEffect5(() => {
+    if (open) place();
+  }, [open, text2]);
+  useEffect11(() => {
+    if (!open) return;
+    const doc = host.current.ownerDocument;
+    const view = doc.defaultView;
+    const escape = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    doc.addEventListener("keydown", escape);
+    view.addEventListener("scroll", place, true);
+    view.addEventListener("resize", place);
+    return () => {
+      doc.removeEventListener("keydown", escape);
+      view.removeEventListener("scroll", place, true);
+      view.removeEventListener("resize", place);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs24("span", { ref: host, className: "ui-tip-host", style: { display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx28(
+      "span",
+      {
+        ref: trigger,
+        className: "ui-focusable",
+        tabIndex: 0,
+        "aria-describedby": id,
+        onMouseEnter: () => {
+          if (Date.now() > ignoreMouseUntil.current) setOpen(true);
+        },
+        onMouseLeave: () => {
+          if (Date.now() > ignoreMouseUntil.current) setOpen(false);
+        },
+        onFocus: () => {
+          if (Date.now() > ignoreMouseUntil.current) setOpen(true);
+        },
+        onBlur: () => setOpen(false),
+        onKeyDown: (event) => {
+          if (event.key === "Escape") setOpen(false);
+        },
+        onTouchStart: () => {
+          ignoreMouseUntil.current = Date.now() + 800;
+          touchMoved.current = false;
+        },
+        onTouchMove: () => {
+          touchMoved.current = true;
+        },
+        onTouchCancel: () => {
+          touchMoved.current = true;
+        },
+        onTouchEnd: () => {
+          ignoreMouseUntil.current = Date.now() + 800;
+          if (!touchMoved.current) setOpen((value) => !value);
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx28("span", { ref: tip, id, role: "tooltip", className: `ui-tip${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx28("span", { className: "ui-tip__label", children: text2 }) })
+  ] });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -2482,6 +2610,7 @@ export {
   ThemeToggle,
   Timeline,
   Toast,
+  Tooltip,
   sortTableRows,
   useToast
 };