@adecore/ui 0.31.12 → 0.33.0

package/dist/Tile.js

@@ -1,10 +1,154 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
-import { Kbd } from './Kbd.js';
+import { Kbd } from "./Kbd.js";
 /*
  * One thing to start with, as a card that is a button: a start screen and the empty places of an app
  * use it, so a place to begin looks the same wherever it is offered.
  */
-export function Tile({ icon, title, description, shortcut, primary = false, size = 'md', className, type = 'button', ...rest }) {
-    return (_jsxs("button", { type: type, className: clsx('flex min-w-0 items-center border bg-surface text-left hover:bg-surface-hover disabled:opacity-50 disabled:hover:bg-surface', size === 'md' ? 'gap-3 rounded-xl p-3' : 'gap-2 rounded-lg px-2 py-1.5', primary ? 'border-accent' : 'border-border', className), ...rest, children: [_jsx("span", { className: clsx('grid size-8 shrink-0 place-items-center rounded-lg', primary ? 'bg-accent text-accent-text' : 'bg-surface-sunken text-text-muted'), children: icon }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium text-text", children: title }), description && _jsx("span", { className: "truncate text-xs text-text-muted", children: description })] }), shortcut && _jsx(Kbd, { shortcut: shortcut, variant: "inline", className: "shrink-0" })] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Tile(t0) {
+  const $ = _c(35);
+  let className;
+  let description;
+  let icon;
+  let rest;
+  let shortcut;
+  let t1;
+  let t2;
+  let t3;
+  let title;
+  if ($[0] !== t0) {
+    ({
+      icon,
+      title,
+      description,
+      shortcut,
+      primary: t1,
+      size: t2,
+      className,
+      type: t3,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = description;
+    $[3] = icon;
+    $[4] = rest;
+    $[5] = shortcut;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = title;
+  } else {
+    className = $[1];
+    description = $[2];
+    icon = $[3];
+    rest = $[4];
+    shortcut = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    title = $[9];
+  }
+  const primary = t1 === undefined ? false : t1;
+  const size = t2 === undefined ? "md" : t2;
+  const type = t3 === undefined ? "button" : t3;
+  const t4 = size === "md" ? "gap-3 rounded-xl p-3" : "gap-2 rounded-lg px-2 py-1.5";
+  const t5 = primary ? "border-accent" : "border-border";
+  let t6;
+  if ($[10] !== className || $[11] !== t4 || $[12] !== t5) {
+    t6 = clsx("flex min-w-0 items-center border bg-surface text-left hover:bg-surface-hover disabled:opacity-50 disabled:hover:bg-surface", t4, t5, className);
+    $[10] = className;
+    $[11] = t4;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  const t7 = primary ? "bg-accent text-accent-text" : "bg-surface-sunken text-text-muted";
+  let t8;
+  if ($[14] !== t7) {
+    t8 = clsx("grid size-8 shrink-0 place-items-center rounded-lg", t7);
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== icon || $[17] !== t8) {
+    t9 = /*#__PURE__*/_jsx("span", {
+      className: t8,
+      children: icon
+    });
+    $[16] = icon;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== title) {
+    t10 = /*#__PURE__*/_jsx("span", {
+      className: "truncate text-sm font-medium text-text",
+      children: title
+    });
+    $[19] = title;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[21] !== description) {
+    t11 = description && /*#__PURE__*/_jsx("span", {
+      className: "truncate text-xs text-text-muted",
+      children: description
+    });
+    $[21] = description;
+    $[22] = t11;
+  } else {
+    t11 = $[22];
+  }
+  let t12;
+  if ($[23] !== t10 || $[24] !== t11) {
+    t12 = /*#__PURE__*/_jsxs("span", {
+      className: "flex min-w-0 grow flex-col",
+      children: [t10, t11]
+    });
+    $[23] = t10;
+    $[24] = t11;
+    $[25] = t12;
+  } else {
+    t12 = $[25];
+  }
+  let t13;
+  if ($[26] !== shortcut) {
+    t13 = shortcut && /*#__PURE__*/_jsx(Kbd, {
+      shortcut: shortcut,
+      variant: "inline",
+      className: "shrink-0"
+    });
+    $[26] = shortcut;
+    $[27] = t13;
+  } else {
+    t13 = $[27];
+  }
+  let t14;
+  if ($[28] !== rest || $[29] !== t12 || $[30] !== t13 || $[31] !== t6 || $[32] !== t9 || $[33] !== type) {
+    t14 = /*#__PURE__*/_jsxs("button", {
+      type: type,
+      className: t6,
+      ...rest,
+      children: [t9, t12, t13]
+    });
+    $[28] = rest;
+    $[29] = t12;
+    $[30] = t13;
+    $[31] = t6;
+    $[32] = t9;
+    $[33] = type;
+    $[34] = t14;
+  } else {
+    t14 = $[34];
+  }
+  return t14;
+}

package/dist/Toasts.js

@@ -1,25 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { CircleAlert, CircleCheck, Trash, X } from 'lucide-react';
-import { Button } from './Button.js';
-import { Icon } from './Icon.js';
-import { IconButton } from './IconButton.js';
-import { Kbd } from './Kbd.js';
-import { Spinner } from './Spinner.js';
-import { Surface } from './Surface.js';
+import { useStore } from 'zustand';
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Kbd } from "./Kbd.js";
+import { Spinner } from "./Spinner.js";
+import { Surface } from "./Surface.js";
 import { elapsedOf } from './toast-store.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON = {
-    success: CircleCheck,
-    error: CircleAlert,
-    deleted: Trash
+  success: CircleCheck,
+  error: CircleAlert,
+  deleted: Trash
 };
 const TONE = {
-    progress: 'text-text-muted',
-    success: 'text-status-idle',
-    error: 'text-status-error',
-    deleted: 'text-text-muted'
+  progress: 'text-text-muted',
+  success: 'text-status-idle',
+  error: 'text-status-error',
+  deleted: 'text-text-muted'
 };
 /* The box is as tall as the title's own line, so what sits beside the title centers on that line. */
 const TITLE_LINE = 'flex h-(--text-sm--line-height) shrink-0 items-center';
@@ -27,31 +29,387 @@ const TITLE_LINE = 'flex h-(--text-sm--line-height) shrink-0 items-center';
  * How long the offer in a toast still stands, drawn from the timer that takes the toast away: the
  * ring starts as far along as that timer already is, so both end together. With motion off it stays full.
  */
-function TimerRing({ deadline, onDismiss }) {
-    const { t } = useTranslation('ui');
-    const lifetime = deadline.end - deadline.start;
-    const [elapsed] = useState(() => elapsedOf(deadline, Date.now()));
-    return (_jsxs(IconButton, { size: "xs", label: t('action.dismiss'), className: "group/ring relative -my-px", onClick: onDismiss, children: [_jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", className: "-rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: 8, cy: 8, r: 6, fill: "none", strokeWidth: 2, className: "stroke-border" }), _jsx("circle", { cx: 8, cy: 8, r: 6, fill: "none", strokeWidth: 2, pathLength: 1, strokeDasharray: 1, className: "toast-timer-arc stroke-current", style: { animationDuration: `${lifetime}ms`, animationDelay: `${-elapsed}ms` } })] }), _jsx(Icon, { icon: X, size: 8, className: "absolute opacity-0 group-hover/ring:opacity-100 group-focus-visible/ring:opacity-100" })] }));
+function TimerRing(t0) {
+  const $ = _c(13);
+  const {
+    deadline,
+    onDismiss
+  } = t0;
+  const {
+    t
+  } = useTranslation("ui");
+  const lifetime = deadline.end - deadline.start;
+  let t1;
+  if ($[0] !== deadline) {
+    t1 = () => elapsedOf(deadline, Date.now());
+    $[0] = deadline;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [elapsed] = useState(t1);
+  let t2;
+  if ($[2] !== t) {
+    t2 = t("action.dismiss");
+    $[2] = t;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/_jsx("circle", {
+      cx: 8,
+      cy: 8,
+      r: 6,
+      fill: "none",
+      strokeWidth: 2,
+      className: "stroke-border"
+    });
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const t4 = `${lifetime}ms`;
+  const t5 = `${-elapsed}ms`;
+  let t6;
+  if ($[5] !== t4 || $[6] !== t5) {
+    t6 = /*#__PURE__*/_jsxs("svg", {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      className: "-rotate-90",
+      "aria-hidden": true,
+      children: [t3, /*#__PURE__*/_jsx("circle", {
+        cx: 8,
+        cy: 8,
+        r: 6,
+        fill: "none",
+        strokeWidth: 2,
+        pathLength: 1,
+        strokeDasharray: 1,
+        className: "toast-timer-arc stroke-current",
+        style: {
+          animationDuration: t4,
+          animationDelay: t5
+        }
+      })]
+    });
+    $[5] = t4;
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /*#__PURE__*/_jsx(Icon, {
+      icon: X,
+      size: 8,
+      className: "absolute opacity-0 group-hover/ring:opacity-100 group-focus-visible/ring:opacity-100"
+    });
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== onDismiss || $[10] !== t2 || $[11] !== t6) {
+    t8 = /*#__PURE__*/_jsxs(IconButton, {
+      size: "xs",
+      label: t2,
+      className: "group/ring relative -my-px",
+      onClick: onDismiss,
+      children: [t6, t7]
+    });
+    $[9] = onDismiss;
+    $[10] = t2;
+    $[11] = t6;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  return t8;
 }
-function ActionButton({ action }) {
-    return (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Button, { size: "xs", onClick: action.run, children: action.label }), action.shortcut && _jsx(Kbd, { shortcut: action.shortcut, className: "font-sans text-xs text-text-faint" })] }));
+function ActionButton(t0) {
+  const $ = _c(8);
+  const {
+    action
+  } = t0;
+  let t1;
+  if ($[0] !== action.label || $[1] !== action.run) {
+    t1 = /*#__PURE__*/_jsx(Button, {
+      size: "xs",
+      onClick: action.run,
+      children: action.label
+    });
+    $[0] = action.label;
+    $[1] = action.run;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== action.shortcut) {
+    t2 = action.shortcut && /*#__PURE__*/_jsx(Kbd, {
+      shortcut: action.shortcut,
+      className: "font-sans text-xs text-text-faint"
+    });
+    $[3] = action.shortcut;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t1 || $[6] !== t2) {
+    t3 = /*#__PURE__*/_jsxs("span", {
+      className: "flex items-center gap-2",
+      children: [t1, t2]
+    });
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
 }
-function ToastCard({ toast, footer, onDismiss }) {
-    const { t } = useTranslation('ui');
-    // A toast that goes by itself keeps its close button out of sight until the pointer or the keyboard is on it.
-    const leaves = toast.kind === 'deleted' || (toast.kind === 'success' && toast.persist !== true);
-    const actions = [...(toast.action === undefined ? [] : [toast.action]), ...(toast.actions ?? [])];
-    // An offer that runs out shows how long it has left instead.
-    const countdown = actions.length > 0 ? toast.deadline : undefined;
-    return (_jsxs(Surface, { className: "group flex items-start gap-3 rounded-[10px] py-2.5 pr-2 pl-3", children: [_jsx("span", { className: clsx(TITLE_LINE, 'w-4 justify-center'), children: toast.kind === 'progress' ? (_jsx(Spinner, { size: 16, className: TONE.progress })) : (_jsx(Icon, { icon: ICON[toast.kind], size: 16, className: TONE[toast.kind] })) }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-1", children: [_jsx("span", { className: "text-sm break-words text-text", children: toast.title }), toast.description !== undefined && toast.description !== '' && (_jsx("span", { className: "text-xs break-words text-pretty text-text-muted", children: toast.description })), actions.length > 1 && (_jsx("span", { className: "mt-1 -ml-2 flex flex-wrap items-center gap-x-2 gap-y-1", children: actions.map((action) => (_jsx(ActionButton, { action: action }, action.label))) })), footer?.(toast)] }), actions.length === 1 && (_jsx("span", { className: TITLE_LINE, children: _jsx(ActionButton, { action: actions[0] }) })), countdown !== undefined ? (_jsx(TimerRing, { deadline: countdown, onDismiss: onDismiss }, countdown.start)) : (_jsx(IconButton, { icon: X, size: "xs", label: t('action.dismiss'), className: clsx('-my-px', leaves && 'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100'), onClick: onDismiss }))] }));
+function ToastCard(t0) {
+  const $ = _c(37);
+  const {
+    toast,
+    footer,
+    onDismiss
+  } = t0;
+  const {
+    t
+  } = useTranslation("ui");
+  const leaves = toast.kind === "deleted" || toast.kind === "success" && toast.persist !== true;
+  let t1;
+  if ($[0] !== toast.action) {
+    t1 = toast.action === undefined ? [] : [toast.action];
+    $[0] = toast.action;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== toast.actions) {
+    t2 = toast.actions ?? [];
+    $[2] = toast.actions;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t1 || $[5] !== t2) {
+    t3 = [...t1, ...t2];
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const actions = t3;
+  const countdown = actions.length > 0 ? toast.deadline : undefined;
+  let t4;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = clsx(TITLE_LINE, "w-4 justify-center");
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== toast.kind) {
+    t5 = /*#__PURE__*/_jsx("span", {
+      className: t4,
+      children: toast.kind === "progress" ? /*#__PURE__*/_jsx(Spinner, {
+        size: 16,
+        className: TONE.progress
+      }) : /*#__PURE__*/_jsx(Icon, {
+        icon: ICON[toast.kind],
+        size: 16,
+        className: TONE[toast.kind]
+      })
+    });
+    $[8] = toast.kind;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== toast.title) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      className: "text-sm break-words text-text",
+      children: toast.title
+    });
+    $[10] = toast.title;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] !== toast.description) {
+    t7 = toast.description !== undefined && toast.description !== "" && /*#__PURE__*/_jsx("span", {
+      className: "text-xs break-words text-pretty text-text-muted",
+      children: toast.description
+    });
+    $[12] = toast.description;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  let t8;
+  if ($[14] !== actions) {
+    t8 = actions.length > 1 && /*#__PURE__*/_jsx("span", {
+      className: "mt-1 -ml-2 flex flex-wrap items-center gap-x-2 gap-y-1",
+      children: actions.map(_temp)
+    });
+    $[14] = actions;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== footer || $[17] !== toast) {
+    t9 = footer?.(toast);
+    $[16] = footer;
+    $[17] = toast;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== t6 || $[20] !== t7 || $[21] !== t8 || $[22] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      className: "flex min-w-0 grow flex-col gap-1",
+      children: [t6, t7, t8, t9]
+    });
+    $[19] = t6;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] !== actions[0] || $[25] !== actions.length) {
+    t11 = actions.length === 1 && /*#__PURE__*/_jsx("span", {
+      className: TITLE_LINE,
+      children: /*#__PURE__*/_jsx(ActionButton, {
+        action: actions[0]
+      })
+    });
+    $[24] = actions[0];
+    $[25] = actions.length;
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  let t12;
+  if ($[27] !== countdown || $[28] !== leaves || $[29] !== onDismiss || $[30] !== t) {
+    t12 = countdown !== undefined ? /*#__PURE__*/_jsx(TimerRing, {
+      deadline: countdown,
+      onDismiss: onDismiss
+    }, countdown.start) : /*#__PURE__*/_jsx(IconButton, {
+      icon: X,
+      size: "xs",
+      label: t("action.dismiss"),
+      className: clsx("-my-px", leaves && "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"),
+      onClick: onDismiss
+    });
+    $[27] = countdown;
+    $[28] = leaves;
+    $[29] = onDismiss;
+    $[30] = t;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  let t13;
+  if ($[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t5) {
+    t13 = /*#__PURE__*/_jsxs(Surface, {
+      className: "group flex items-start gap-3 rounded-[10px] py-2.5 pr-2 pl-3",
+      children: [t5, t10, t11, t12]
+    });
+    $[32] = t10;
+    $[33] = t11;
+    $[34] = t12;
+    $[35] = t5;
+    $[36] = t13;
+  } else {
+    t13 = $[36];
+  }
+  return t13;
 }
 /*
  * Bottom right, over everything: what an action is doing while it runs and how it went when it is
  * over, and a deletion that can still be taken back. A success takes itself away after four seconds,
  * a deletion after eight, and a failure waits to be read.
  */
-export function Toasts({ store, footer, className, ref }) {
-    const toasts = store((state) => state.toasts);
-    // Stays mounted with nothing in it: a screen reader skips what a live region says the moment it is inserted.
-    return (_jsx("div", { ref: ref, className: clsx('fixed right-4 bottom-4 z-(--z-popup) flex w-90 max-w-[calc(100vw-32px)] flex-col gap-2', className), role: "status", "aria-live": "polite", children: toasts.map((toast) => (_jsx(ToastCard, { toast: toast, footer: footer, onDismiss: () => store.getState().dismiss(toast.id) }, toast.id))) }));
+function _temp(action) {
+  return /*#__PURE__*/_jsx(ActionButton, {
+    action: action
+  }, action.label);
+}
+export function Toasts(t0) {
+  const $ = _c(13);
+  const {
+    store,
+    footer,
+    className,
+    ref
+  } = t0;
+  const toasts = useStore(store, _temp2);
+  let t1;
+  if ($[0] !== className) {
+    t1 = clsx("fixed right-4 bottom-4 z-(--z-popup) flex w-90 max-w-[calc(100vw-32px)] flex-col gap-2", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== footer || $[3] !== store || $[4] !== toasts) {
+    let t3;
+    if ($[6] !== footer || $[7] !== store) {
+      t3 = toast => /*#__PURE__*/_jsx(ToastCard, {
+        toast: toast,
+        footer: footer,
+        onDismiss: () => store.getState().dismiss(toast.id)
+      }, toast.id);
+      $[6] = footer;
+      $[7] = store;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    t2 = toasts.map(t3);
+    $[2] = footer;
+    $[3] = store;
+    $[4] = toasts;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[9] !== ref || $[10] !== t1 || $[11] !== t2) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      className: t1,
+      role: "status",
+      "aria-live": "polite",
+      children: t2
+    });
+    $[9] = ref;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  return t3;
 }
+function _temp2(state) {
+  return state.toasts;
+}