@adecore/ui 0.33.2 → 0.34.0

package/dist/Banner.d.ts

@@ -6,7 +6,8 @@ export interface BannerProps {
     tone: BannerTone;
     message: ReactNode;
     children?: ReactNode;
+    placement?: 'overlay' | 'inline';
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function Banner({ icon, tone, message, children, className, ref }: BannerProps): import("react").JSX.Element;
+export declare function Banner({ icon, tone, message, children, placement, className, ref }: BannerProps): import("react").JSX.Element;

package/dist/Banner.js

@@ -2,98 +2,139 @@ import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { Icon } from "./Icon.js";
 import { Surface } from "./Surface.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const TONE = {
   attention: 'text-status-needs-you',
   error: 'text-status-error',
   neutral: 'text-text-muted'
 };
+const OVERLAY = 'absolute inset-x-0 top-3 z-20';
 /*
  * The strip over a view: one line and the buttons that answer it. It is where anything that waits
  * for a person goes (a conflict, a failure, a request), because a corner toast is read after the fact
  * and a decision has to be where the eyes already are. One at a time: the slot is one row and the
- * caller picks what stands in it.
+ * caller picks what stands in it. Inline, it is a notice that belongs to the page it stands in.
  */
 export function Banner(t0) {
-  const $ = _c(17);
+  const $ = _c(25);
   const {
     icon,
     tone,
     message,
     children,
-    className: t1,
+    placement: t1,
+    className,
     ref
   } = t0;
-  const className = t1 === undefined ? "absolute inset-x-0 top-3 z-20" : t1;
-  let t2;
-  if ($[0] !== className) {
-    t2 = clsx("pointer-events-auto flex justify-center px-4", className);
-    $[0] = className;
-    $[1] = t2;
+  const placement = t1 === undefined ? "overlay" : t1;
+  const t2 = TONE[tone];
+  let t3;
+  if ($[0] !== t2) {
+    t3 = clsx("shrink-0", t2);
+    $[0] = t2;
+    $[1] = t3;
   } else {
-    t2 = $[1];
+    t3 = $[1];
   }
-  const t3 = TONE[tone];
   let t4;
-  if ($[2] !== t3) {
-    t4 = clsx("shrink-0", t3);
-    $[2] = t3;
-    $[3] = t4;
+  if ($[2] !== icon || $[3] !== t3) {
+    t4 = /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: 16,
+      className: t3
+    });
+    $[2] = icon;
+    $[3] = t3;
+    $[4] = t4;
   } else {
-    t4 = $[3];
+    t4 = $[4];
   }
   let t5;
-  if ($[4] !== icon || $[5] !== t4) {
-    t5 = /*#__PURE__*/_jsx(Icon, {
-      icon: icon,
-      size: 16,
-      className: t4
+  if ($[5] !== message) {
+    t5 = /*#__PURE__*/_jsx("span", {
+      className: "grow",
+      children: message
     });
-    $[4] = icon;
-    $[5] = t4;
+    $[5] = message;
     $[6] = t5;
   } else {
     t5 = $[6];
   }
   let t6;
-  if ($[7] !== message) {
-    t6 = /*#__PURE__*/_jsx("span", {
-      className: "grow",
-      children: message
+  if ($[7] !== children || $[8] !== t4 || $[9] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t4, t5, children]
     });
-    $[7] = message;
-    $[8] = t6;
+    $[7] = children;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
   } else {
-    t6 = $[8];
+    t6 = $[10];
   }
-  let t7;
-  if ($[9] !== children || $[10] !== t5 || $[11] !== t6) {
-    t7 = /*#__PURE__*/_jsxs(Surface, {
+  const line = t6;
+  if (placement === "inline") {
+    let t7;
+    if ($[11] !== className) {
+      t7 = clsx("flex items-center gap-3 rounded-lg border border-border bg-surface px-3 py-2 text-sm text-text", className);
+      $[11] = className;
+      $[12] = t7;
+    } else {
+      t7 = $[12];
+    }
+    let t8;
+    if ($[13] !== line || $[14] !== ref || $[15] !== t7) {
+      t8 = /*#__PURE__*/_jsx("div", {
+        ref: ref,
+        className: t7,
+        role: "status",
+        "aria-live": "polite",
+        children: line
+      });
+      $[13] = line;
+      $[14] = ref;
+      $[15] = t7;
+      $[16] = t8;
+    } else {
+      t8 = $[16];
+    }
+    return t8;
+  }
+  const t7 = className ?? OVERLAY;
+  let t8;
+  if ($[17] !== t7) {
+    t8 = clsx("pointer-events-auto flex justify-center px-4", t7);
+    $[17] = t7;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== line) {
+    t9 = /*#__PURE__*/_jsx(Surface, {
       className: "flex max-w-[640px] items-center gap-3 rounded-lg px-3 py-2 text-sm text-text",
-      children: [t5, t6, children]
+      children: line
     });
-    $[9] = children;
-    $[10] = t5;
-    $[11] = t6;
-    $[12] = t7;
+    $[19] = line;
+    $[20] = t9;
   } else {
-    t7 = $[12];
+    t9 = $[20];
   }
-  let t8;
-  if ($[13] !== ref || $[14] !== t2 || $[15] !== t7) {
-    t8 = /*#__PURE__*/_jsx("div", {
+  let t10;
+  if ($[21] !== ref || $[22] !== t8 || $[23] !== t9) {
+    t10 = /*#__PURE__*/_jsx("div", {
       ref: ref,
-      className: t2,
+      className: t8,
       role: "status",
       "aria-live": "polite",
-      children: t7
+      children: t9
     });
-    $[13] = ref;
-    $[14] = t2;
-    $[15] = t7;
-    $[16] = t8;
+    $[21] = ref;
+    $[22] = t8;
+    $[23] = t9;
+    $[24] = t10;
   } else {
-    t8 = $[16];
+    t10 = $[24];
   }
-  return t8;
+  return t10;
 }

package/dist/CopyButton.d.ts

@@ -0,0 +1,24 @@
+import { type Ref } from 'react';
+import { type ButtonSize, type ButtonVariant } from './Button.tsx';
+import { type IconButtonSize } from './IconButton.tsx';
+import type { TooltipSide } from './Tooltip.tsx';
+interface CopyButtonBase {
+    text: string;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+interface CopyIconButtonProps extends CopyButtonBase {
+    showLabel?: false;
+    size?: IconButtonSize;
+    tooltipSide?: TooltipSide;
+}
+interface CopyLabelButtonProps extends CopyButtonBase {
+    showLabel: true;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+}
+export type CopyButtonProps = CopyIconButtonProps | CopyLabelButtonProps;
+export declare function CopyButton(props: CopyButtonProps): import("react").JSX.Element;
+export {};

package/dist/CopyButton.js

@@ -0,0 +1,144 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check, Copy } from 'lucide-react';
+import { Button } from "./Button.js";
+import { copyText } from './clipboard.js';
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const COPIED_MS = 1500;
+/* A button that puts text on the clipboard and shows a check and "Copied" for a moment once it got there. */
+export function CopyButton(props) {
+  const $ = _c(29);
+  const {
+    text,
+    label,
+    disabled,
+    className,
+    ref
+  } = props;
+  const {
+    t
+  } = useTranslation("ui");
+  const [copiedAt, setCopiedAt] = useState(null);
+  let t0;
+  let t1;
+  if ($[0] !== copiedAt) {
+    t0 = () => {
+      if (copiedAt === null) {
+        return;
+      }
+      const timer = window.setTimeout(() => setCopiedAt(null), COPIED_MS);
+      return () => window.clearTimeout(timer);
+    };
+    t1 = [copiedAt];
+    $[0] = copiedAt;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  const copied = copiedAt !== null;
+  let t2;
+  if ($[3] !== label || $[4] !== t) {
+    t2 = label ?? t("action.copy");
+    $[3] = label;
+    $[4] = t;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const name = t2;
+  let t3;
+  if ($[6] !== text) {
+    t3 = async () => {
+      if (await copyText(text)) {
+        setCopiedAt(Date.now());
+      }
+    };
+    $[6] = text;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const copy = t3;
+  let t4;
+  if ($[8] !== className || $[9] !== copied || $[10] !== copy || $[11] !== disabled || $[12] !== name || $[13] !== props.showLabel || $[14] !== props.size || $[15] !== props.tooltipSide || $[16] !== props.variant || $[17] !== ref || $[18] !== t) {
+    t4 = props.showLabel ? /*#__PURE__*/_jsxs(Button, {
+      ref: ref,
+      variant: props.variant,
+      size: props.size,
+      disabled: disabled,
+      className: className,
+      onClick: () => void copy(),
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: copied ? Check : Copy,
+        size: props.size === "xs" ? 12 : 14
+      }), copied ? t("action.copied") : name]
+    }) : /*#__PURE__*/_jsx(IconButton, {
+      ref: ref,
+      icon: copied ? Check : Copy,
+      label: name,
+      tooltip: copied ? t("action.copied") : name,
+      tooltipSide: props.tooltipSide,
+      size: props.size,
+      disabled: disabled,
+      className: className,
+      onClick: () => void copy()
+    });
+    $[8] = className;
+    $[9] = copied;
+    $[10] = copy;
+    $[11] = disabled;
+    $[12] = name;
+    $[13] = props.showLabel;
+    $[14] = props.size;
+    $[15] = props.tooltipSide;
+    $[16] = props.variant;
+    $[17] = ref;
+    $[18] = t;
+    $[19] = t4;
+  } else {
+    t4 = $[19];
+  }
+  const button = t4;
+  let t5;
+  if ($[20] !== copied || $[21] !== t) {
+    t5 = copied ? t("action.copied") : "";
+    $[20] = copied;
+    $[21] = t;
+    $[22] = t5;
+  } else {
+    t5 = $[22];
+  }
+  let t6;
+  if ($[23] !== copiedAt || $[24] !== t5) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      role: "status",
+      className: "sr-only",
+      children: /*#__PURE__*/_jsx("span", {
+        children: t5
+      }, copiedAt)
+    });
+    $[23] = copiedAt;
+    $[24] = t5;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+  let t7;
+  if ($[26] !== button || $[27] !== t6) {
+    t7 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [button, t6]
+    });
+    $[26] = button;
+    $[27] = t6;
+    $[28] = t7;
+  } else {
+    t7 = $[28];
+  }
+  return t7;
+}

package/dist/ErrorBoundary.js

@@ -1,14 +1,13 @@
 import { c as _c } from "react/compiler-runtime";
 import { Component } from 'react';
 import clsx from 'clsx';
-import { Copy, RotateCw, TriangleAlert } from 'lucide-react';
+import { RotateCw, TriangleAlert } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button } from "./Button.js";
 import { ButtonGroup } from "./ButtonGroup.js";
-import { copyText } from './clipboard.js';
+import { CopyButton } from "./CopyButton.js";
 import { errorMessageOf, errorReport, shouldReset } from './error-boundary.js';
 import { Icon } from "./Icon.js";
-import { IconButton } from "./IconButton.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CLEAR = {
   error: null,
@@ -140,19 +139,19 @@ function ErrorFallback(t0) {
     t13 = $[22];
   }
   let t14;
-  if ($[23] !== t) {
-    t14 = t("action.copyError");
-    $[23] = t;
-    $[24] = t14;
+  if ($[23] !== componentStack || $[24] !== error || $[25] !== label) {
+    t14 = errorReport(label, error, componentStack);
+    $[23] = componentStack;
+    $[24] = error;
+    $[25] = label;
+    $[26] = t14;
   } else {
-    t14 = $[24];
+    t14 = $[26];
   }
   let t15;
-  if ($[25] !== componentStack || $[26] !== error || $[27] !== label) {
-    t15 = () => copyText(errorReport(label, error, componentStack));
-    $[25] = componentStack;
-    $[26] = error;
-    $[27] = label;
+  if ($[27] !== t) {
+    t15 = t("action.copyError");
+    $[27] = t;
     $[28] = t15;
   } else {
     t15 = $[28];
@@ -160,11 +159,10 @@ function ErrorFallback(t0) {
   let t16;
   if ($[29] !== t14 || $[30] !== t15) {
     t16 = /*#__PURE__*/_jsx(ButtonGroup, {
-      children: /*#__PURE__*/_jsx(IconButton, {
-        icon: Copy,
-        size: "sm",
-        label: t14,
-        onClick: t15
+      children: /*#__PURE__*/_jsx(CopyButton, {
+        text: t14,
+        label: t15,
+        size: "sm"
       })
     });
     $[29] = t14;

package/dist/ProjectSwitcher.js

@@ -7,7 +7,7 @@ import * as Menu from './menu/index.parts.js';
 import { ProjectSwitcherRow } from "./project-switcher-row.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function ProjectSwitcher(t0) {
-  const $ = _c(32);
+  const $ = _c(28);
   const {
     current,
     projects,
@@ -28,78 +28,71 @@ export function ProjectSwitcher(t0) {
     t
   } = useTranslation("ui");
   let t1;
-  if ($[0] !== current?.name || $[1] !== label || $[2] !== t) {
-    t1 = label ?? current?.name ?? t("projectSwitcher.label");
-    $[0] = current?.name;
-    $[1] = label;
-    $[2] = t;
-    $[3] = t1;
+  if ($[0] !== label || $[1] !== t) {
+    t1 = label ?? t("projectSwitcher.label");
+    $[0] = label;
+    $[1] = t;
+    $[2] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[2];
   }
-  let t2;
-  if ($[4] !== className) {
-    t2 = clsx("project-switcher-trigger", className);
-    $[4] = className;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  const t3 = current?.icon;
-  let t4;
-  if ($[6] !== current?.name || $[7] !== t) {
-    t4 = current?.name ?? t("projectSwitcher.label");
-    $[6] = current?.name;
-    $[7] = t;
-    $[8] = t4;
+  const empty = t1;
+  const t2 = current === null ? empty : label === undefined ? current.name : `${label}: ${current.name}`;
+  let t3;
+  if ($[3] !== className) {
+    t3 = clsx("project-switcher-trigger", className);
+    $[3] = className;
+    $[4] = t3;
   } else {
-    t4 = $[8];
+    t3 = $[4];
   }
-  let t5;
-  if ($[9] !== t4) {
-    t5 = /*#__PURE__*/_jsx("span", {
+  const t4 = current?.icon;
+  const t5 = current?.name ?? empty;
+  let t6;
+  if ($[5] !== t5) {
+    t6 = /*#__PURE__*/_jsx("span", {
       className: "truncate text-sm font-medium text-text",
-      children: t4
+      children: t5
     });
-    $[9] = t4;
-    $[10] = t5;
+    $[5] = t5;
+    $[6] = t6;
   } else {
-    t5 = $[10];
+    t6 = $[6];
   }
-  let t6;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = /*#__PURE__*/_jsx(Icon, {
+  let t7;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /*#__PURE__*/_jsx(Icon, {
       icon: ChevronDown,
       size: 14,
       className: "shrink-0 text-text-muted"
     });
-    $[11] = t6;
+    $[7] = t7;
   } else {
-    t6 = $[11];
+    t7 = $[7];
   }
-  let t7;
-  if ($[12] !== disabled || $[13] !== leading || $[14] !== ref || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t5) {
-    t7 = /*#__PURE__*/_jsxs(Menu.Trigger, {
+  let t8;
+  if ($[8] !== disabled || $[9] !== leading || $[10] !== ref || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 || $[14] !== t6) {
+    t8 = /*#__PURE__*/_jsxs(Menu.Trigger, {
       ref: ref,
       disabled: disabled,
-      "aria-label": t1,
-      className: t2,
-      children: [leading, t3, t5, t6]
+      "aria-label": t2,
+      className: t3,
+      children: [leading, t4, t6, t7]
     });
-    $[12] = disabled;
-    $[13] = leading;
-    $[14] = ref;
-    $[15] = t1;
-    $[16] = t2;
-    $[17] = t3;
-    $[18] = t5;
-    $[19] = t7;
+    $[8] = disabled;
+    $[9] = leading;
+    $[10] = ref;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t6;
+    $[15] = t8;
   } else {
-    t7 = $[19];
+    t8 = $[15];
   }
-  let t8;
-  if ($[20] !== before || $[21] !== children || $[22] !== onSelect || $[23] !== projects || $[24] !== recentProjects) {
-    t8 = /*#__PURE__*/_jsx(Menu.Popup, {
+  let t9;
+  if ($[16] !== before || $[17] !== children || $[18] !== onSelect || $[19] !== projects || $[20] !== recentProjects) {
+    t9 = /*#__PURE__*/_jsx(Menu.Popup, {
       className: "min-w-60",
       children: /*#__PURE__*/_jsx(ProjectSwitcherGroups, {
         projects: projects,
@@ -109,33 +102,33 @@ export function ProjectSwitcher(t0) {
         children: children
       })
     });
-    $[20] = before;
-    $[21] = children;
-    $[22] = onSelect;
-    $[23] = projects;
-    $[24] = recentProjects;
-    $[25] = t8;
+    $[16] = before;
+    $[17] = children;
+    $[18] = onSelect;
+    $[19] = projects;
+    $[20] = recentProjects;
+    $[21] = t9;
   } else {
-    t8 = $[25];
+    t9 = $[21];
   }
-  let t9;
-  if ($[26] !== defaultOpen || $[27] !== onOpenChange || $[28] !== open || $[29] !== t7 || $[30] !== t8) {
-    t9 = /*#__PURE__*/_jsxs(Menu.Root, {
+  let t10;
+  if ($[22] !== defaultOpen || $[23] !== onOpenChange || $[24] !== open || $[25] !== t8 || $[26] !== t9) {
+    t10 = /*#__PURE__*/_jsxs(Menu.Root, {
       open: open,
       defaultOpen: defaultOpen,
       onOpenChange: onOpenChange,
-      children: [t7, t8]
+      children: [t8, t9]
     });
-    $[26] = defaultOpen;
-    $[27] = onOpenChange;
-    $[28] = open;
-    $[29] = t7;
-    $[30] = t8;
-    $[31] = t9;
+    $[22] = defaultOpen;
+    $[23] = onOpenChange;
+    $[24] = open;
+    $[25] = t8;
+    $[26] = t9;
+    $[27] = t10;
   } else {
-    t9 = $[31];
+    t10 = $[27];
   }
-  return t9;
+  return t10;
 }
 /* The rows of the popup, apart from it so they render without an open menu. */
 export function ProjectSwitcherGroups(t0) {

package/dist/RelativeTime.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'react';
+import { type TooltipSide } from './Tooltip.tsx';
+export interface RelativeTimeProps {
+    at: Date | number | null | undefined;
+    tooltipSide?: TooltipSide;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function RelativeTime({ at, tooltipSide, className, ref }: RelativeTimeProps): import("react").JSX.Element;

package/dist/RelativeTime.js

@@ -0,0 +1,38 @@
+import clsx from 'clsx';
+import { formatAge, formatDayClockWithYear, useFormatLocale } from './format/index.js';
+import { Tooltip } from "./Tooltip.js";
+import { useNow } from './useNow.js';
+/* The finest step of an age is a minute, so half of one keeps it at most thirty seconds behind. */
+import { jsx as _jsx } from "react/jsx-runtime";
+const TICK_MS = 30_000;
+/* A moment as its age, `3m ago`, counting on while it is on screen, with the exact time on hover and on keyboard focus. */
+export function RelativeTime({
+  at,
+  tooltipSide,
+  className,
+  ref
+}) {
+  // The formatters read the locale from a module, not from an input, so a compiled render would keep its first words.
+  'use no memo';
+
+  useFormatLocale();
+  const now = useNow(TICK_MS);
+  if (at === null || at === undefined || Number.isNaN(new Date(at).getTime())) {
+    return /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      className: className,
+      children: "-"
+    });
+  }
+  return /*#__PURE__*/_jsx(Tooltip, {
+    label: formatDayClockWithYear(at),
+    side: tooltipSide,
+    children: /*#__PURE__*/_jsx("time", {
+      ref: ref,
+      dateTime: new Date(at).toISOString(),
+      tabIndex: 0,
+      className: clsx('focus-ring rounded-sm whitespace-nowrap', className),
+      children: formatAge(at, now)
+    })
+  });
+}