@eifi1/ui-kit 0.8.0 → 0.9.0

package/dist/components/ui.js

@@ -60,19 +60,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,13 +91,10 @@ 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) {
+const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", tone = "default", quiet, pressed, stopPropagation, className, onClick, onKeyDown, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -109,8 +115,7 @@ 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
       )
@@ -576,7 +581,8 @@ function Spinner({ className, label, ...rest }) {
     " "
   ] }) });
 }
-function EmptyState({ title, hint, icon, action, className, ...rest }) {
+function EmptyState({ title, hint, icon, action, headingAs, className, ...rest }) {
+  const Title = headingAs ?? "div";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -587,8 +593,8 @@ function EmptyState({ title, hint, icon, action, className, ...rest }) {
       ),
       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 }),
+        /* @__PURE__ */ jsx(Title, { className: "text-sm font-medium text-[var(--text-secondary)]", children: title }),
+        hint != null && hint !== false && hint !== "" && /* @__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 })
       ]
     }