@eifi1/ui-kit 0.8.1 → 0.10.0

package/dist/components/ui.js

@@ -27,15 +27,48 @@ const buttonVariantClasses = {
   // ring hugging the word instead of drawing a pill round it.
   link: "rounded-sm p-0 bg-transparent text-[var(--brand)] underline-offset-4 hover:underline focus:ring-[var(--brand)]"
 };
+const BUTTON_TONES = {
+  muted: "text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:hover:text-[var(--text-secondary)]",
+  danger: "text-[var(--text-secondary)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)] disabled:hover:text-[var(--text-secondary)]"
+};
+const TONED_VARIANTS = /* @__PURE__ */ new Set(["link", "ghost"]);
+const BUTTON_LINK_PRESSED = "font-medium text-[var(--brand)] hover:text-[var(--brand)] disabled:hover:text-[var(--brand)]";
 function buttonClasses(variant = "primary", classNameOrOptions) {
   const { size = "md", className } = typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
   return cn(BUTTON_BASE, BUTTON_SIZES[size], buttonVariantClasses[variant], className);
 }
-function Button({ variant = "primary", size = "md", stretch, className, ...rest }) {
-  return /* @__PURE__ */ jsx(
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+function Button({
+  variant = "primary",
+  size = "md",
+  stretch,
+  tone = "default",
+  pressed,
+  disabledReason,
+  className,
+  onClick,
+  ...rest
+}) {
+  const reasonId = useId();
+  const locked = hasContent(disabledReason);
+  const ownDescribedBy = rest["aria-describedby"];
+  const button = /* @__PURE__ */ jsx(
     "button",
     {
       ...rest,
+      disabled: locked ? void 0 : rest.disabled,
+      "aria-disabled": locked || rest["aria-disabled"],
+      "aria-describedby": locked ? ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId : ownDescribedBy,
+      "aria-pressed": pressed ?? rest["aria-pressed"],
+      onClick: (e) => {
+        if (locked) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      },
       className: cn(
         BUTTON_BASE,
         BUTTON_SIZES[size],
@@ -44,10 +77,25 @@ function Button({ variant = "primary", size = "md", stretch, className, ...rest
         // align-items). No effect outside a flex row / when it's already the tallest.
         stretch && "self-stretch",
         buttonVariantClasses[variant],
+        tone !== "default" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],
+        pressed && (variant === "link" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),
+        // The disabled look for the focusable kind of disabled.
+        locked && "cursor-not-allowed opacity-50",
         className
       )
     }
   );
+  if (!locked) return button;
+  return (
+    // The button in a FRAGMENT so Tooltip does not clone its bubble into the
+    // description as well — the hidden copy below already describes it, and the same
+    // sentence twice would be read on every focus. `stretch` moves to the wrapper,
+    // which is now the flex item.
+    /* @__PURE__ */ jsx(Tooltip, { label: disabledReason, className: stretch ? "self-stretch" : void 0, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      button,
+      /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: disabledReason })
+    ] }) })
+  );
 }
 const ICON_BUTTON_BASE = "inline-flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
 const ICON_BUTTON_SIZES = {
@@ -60,19 +108,28 @@ const ICON_BUTTON_SIZES = {
   "2xs": "size-6 rounded [&_svg]:size-3.5"
 };
 const ICON_BUTTON_TONES = {
-  default: "",
-  muted: "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]",
-  danger: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]",
-  // Amber AT REST, unlike `danger`: a warning icon button is the one on the row that
-  // needs attention (keksdose's "needs review" flag on a transaction, the stale-rate
-  // marker), not an action repeated down a list — quiet grey would hide the very
-  // thing it is there to point out.
-  warning: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]",
-  // Sky at rest, for the same reason as `warning`: keksdose's reconcile action on an
-  // account row (accounts-page:867) is the one on the row to notice, and it is
-  // informational rather than a problem, so it takes the `--info` family.
-  info: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]"
+  danger: {
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]",
+    toned: "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border)]"
+  },
+  warning: {
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--warning-bg)] hover:text-[var(--warning)] focus:ring-[var(--warning-border)]",
+    toned: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]"
+  },
+  info: {
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--info-bg)] hover:text-[var(--info)] focus:ring-[var(--info-border)]",
+    toned: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]"
+  }
 };
+const ICON_BUTTON_MUTED = "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]";
+const QUIET_BY_DEFAULT = { danger: true, warning: false, info: false };
+function iconButtonToneClass(tone, quiet) {
+  if (tone === "default") return "";
+  if (tone === "muted") return cn(ICON_BUTTON_MUTED, ICON_BUTTON_QUIET_DISABLED_REST);
+  const isQuiet = quiet ?? QUIET_BY_DEFAULT[tone];
+  const look = ICON_BUTTON_TONES[tone];
+  return isQuiet ? cn(look.quiet, ICON_BUTTON_QUIET_DISABLED_REST) : look.toned;
+}
 const ICON_BUTTON_DISABLED_REST = {
   primary: "disabled:hover:bg-[var(--bg-surface-2)]",
   secondary: "disabled:hover:bg-transparent",
@@ -82,18 +139,31 @@ const ICON_BUTTON_DISABLED_REST = {
   link: "disabled:hover:bg-transparent disabled:hover:no-underline",
   overlay: "disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]"
 };
-const ICON_BUTTON_TONES_DISABLED_REST = {
-  muted: "disabled:hover:text-[var(--text-placeholder)]",
-  danger: "disabled:hover:text-[var(--text-placeholder)]"
-};
+const ICON_BUTTON_QUIET_DISABLED_REST = "disabled:hover:text-[var(--text-placeholder)]";
 const ICON_BUTTON_PRESSED = "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-[var(--brand)] disabled:hover:bg-[var(--brand-bg)] disabled:hover:text-[var(--brand)]";
 const ICON_BUTTON_OVERLAY = "rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-[var(--text-inverse)] backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus:ring-[var(--text-inverse)]";
-const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", tone = "default", pressed, stopPropagation, className, onClick, onKeyDown, ...rest }, ref) {
-  return /* @__PURE__ */ jsx(
+const IconButton = forwardRef(function IconButton2({
+  variant = "ghost",
+  size = "md",
+  tone = "default",
+  quiet,
+  pressed,
+  stopPropagation,
+  label,
+  tooltip = true,
+  tooltipSide,
+  tooltipPortal,
+  className,
+  onClick,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const button = /* @__PURE__ */ jsx(
     "button",
     {
       ref,
       ...rest,
+      "aria-label": rest["aria-label"] ?? label,
       "aria-pressed": pressed ?? rest["aria-pressed"],
       onClick: (e) => {
         if (stopPropagation) e.stopPropagation();
@@ -109,13 +179,18 @@ const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "
         // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
         variant === "overlay" ? ICON_BUTTON_OVERLAY : buttonVariantClasses[variant],
         ICON_BUTTON_DISABLED_REST[variant],
-        ICON_BUTTON_TONES[tone],
-        ICON_BUTTON_TONES_DISABLED_REST[tone],
+        iconButtonToneClass(tone, quiet),
         pressed && ICON_BUTTON_PRESSED,
         className
       )
     }
   );
+  if (!tooltip || label === void 0 || label === "") return button;
+  return (
+    // A fragment, so Tooltip leaves the button's description alone: the bubble says
+    // exactly what `aria-label` already does.
+    /* @__PURE__ */ jsx(Tooltip, { label, side: tooltipSide, portal: tooltipPortal, children: /* @__PURE__ */ jsx(Fragment, { children: button }) })
+  );
 });
 IconButton.displayName = "IconButton";
 const FIELD_BASE = "block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-sm placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:ring-[var(--brand)] disabled:cursor-default disabled:bg-[var(--bg-surface-2)] disabled:text-[var(--text-muted)] [&[readonly]]:bg-[var(--bg-surface-2)] [&[readonly]]:text-[var(--text-muted)]";
@@ -576,7 +651,42 @@ function Spinner({ className, label, ...rest }) {
     " "
   ] }) });
 }
-function EmptyState({ title, hint, icon, action, className, ...rest }) {
+const EMPTY_STATE_TONE = {
+  danger: "text-[var(--danger)]",
+  success: "text-[var(--success)]"
+};
+function EmptyState({
+  title,
+  hint,
+  icon,
+  action,
+  headingAs,
+  variant = "box",
+  tone,
+  className,
+  ...rest
+}) {
+  const Title = headingAs ?? "div";
+  const toneClass = tone ? EMPTY_STATE_TONE[tone] : void 0;
+  const hasHint = hint != null && hint !== false && hint !== "";
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        className: cn(
+          "flex flex-wrap items-center justify-center gap-x-2 gap-y-1 py-4 text-center text-sm text-[var(--text-muted)]",
+          className
+        ),
+        children: [
+          icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("flex text-[var(--text-placeholder)] [&_svg]:size-4", toneClass), children: icon }),
+          /* @__PURE__ */ jsx(Title, { className: cn("text-sm", toneClass), children: title }),
+          hasHint && /* @__PURE__ */ jsx("span", { className: "text-xs", children: hint }),
+          action != null && /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-2", children: action })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -586,9 +696,9 @@ function EmptyState({ title, hint, icon, action, className, ...rest }) {
         className
       ),
       children: [
-        icon != null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "mb-3 text-[var(--text-placeholder)] [&_svg]:size-8", children: icon }),
-        /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--text-secondary)]", children: title }),
-        hint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint }),
+        icon != null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("mb-3 text-[var(--text-placeholder)] [&_svg]:size-8", toneClass), children: icon }),
+        /* @__PURE__ */ jsx(Title, { className: cn("text-sm font-medium text-[var(--text-secondary)]", toneClass), children: title }),
+        hasHint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint }),
         action != null && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: action })
       ]
     }