@eifi1/ui-kit 0.7.0 → 0.8.0

package/dist/components/ui.js

@@ -7,24 +7,38 @@ import { horizontalStep } from "../lib/direction.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { Tooltip } from "./tooltip.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
-const BUTTON_BASE = "inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
+const BUTTON_BASE = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
+const BUTTON_SIZES = {
+  md: "gap-2 px-3 py-2 text-sm",
+  sm: "gap-1.5 px-2 py-1 text-xs"
+};
 const buttonVariantClasses = {
   primary: "border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--border)] focus:ring-[var(--brand)]",
   secondary: "border border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]",
   ghost: "bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]",
   danger: "bg-[var(--danger)] text-[var(--danger-contrast)] hover:bg-[var(--danger-hover)] focus:ring-[var(--danger-border)]",
-  brand: "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]"
+  brand: "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]",
+  // A text link that is still a `<button>` — keksdose's six hand-rolled
+  // `<button className="text-brand underline">` sites ("Resend code", "Show all",
+  // "Undo" in a toast…), which act rather than navigate and so must not be anchors.
+  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but
+  // the base's `focus:ring-2` stays: those copies had `outline-none` and no ring, so
+  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that
+  // 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)]"
 };
-function buttonClasses(variant = "primary", className) {
-  return cn(BUTTON_BASE, buttonVariantClasses[variant], className);
+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", stretch, className, ...rest }) {
+function Button({ variant = "primary", size = "md", stretch, className, ...rest }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       ...rest,
       className: cn(
         BUTTON_BASE,
+        BUTTON_SIZES[size],
         // In a flex row next to a taller labelled field, `stretch` makes the button
         // fill the field's height so the two line up (self-stretch overrides the row's
         // align-items). No effect outside a flex row / when it's already the tallest.
@@ -37,6 +51,9 @@ function Button({ variant = "primary", stretch, className, ...rest }) {
 }
 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 = {
+  // The 44px touch target (WCAG 2.5.5's size) with the same 20px glyph — keksdose's
+  // bulk-action bars write `size-11` by hand over an `md` button to get it on phones.
+  lg: "size-11 [&_svg]:size-5",
   md: "size-9 [&_svg]:size-5",
   sm: "size-8 [&_svg]:size-5",
   xs: "size-7 rounded [&_svg]:size-4",
@@ -45,14 +62,39 @@ const ICON_BUTTON_SIZES = {
 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)]"
+  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)]"
+};
+const ICON_BUTTON_DISABLED_REST = {
+  primary: "disabled:hover:bg-[var(--bg-surface-2)]",
+  secondary: "disabled:hover:bg-transparent",
+  ghost: "disabled:hover:bg-transparent",
+  danger: "disabled:hover:bg-[var(--danger)]",
+  brand: "disabled:hover:bg-[var(--brand)]",
+  link: "disabled:hover:bg-transparent disabled:hover:no-underline",
+  overlay: "disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]"
 };
-const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", tone = "default", stopPropagation, className, onClick, onKeyDown, ...rest }, ref) {
+const ICON_BUTTON_TONES_DISABLED_REST = {
+  muted: "disabled:hover:text-[var(--text-placeholder)]",
+  danger: "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(
     "button",
     {
       ref,
       ...rest,
+      "aria-pressed": pressed ?? rest["aria-pressed"],
       onClick: (e) => {
         if (stopPropagation) e.stopPropagation();
         onClick?.(e);
@@ -64,8 +106,12 @@ const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "
       className: cn(
         ICON_BUTTON_BASE,
         ICON_BUTTON_SIZES[size],
-        buttonVariantClasses[variant],
+        // 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],
+        pressed && ICON_BUTTON_PRESSED,
         className
       )
     }
@@ -165,7 +211,7 @@ function FloatingField({
 }
 function FieldHint({
   label,
-  side = "left",
+  side = "start",
   className,
   "aria-label": ariaLabel,
   ...rest
@@ -439,17 +485,19 @@ const Textarea = forwardRef(function Textarea2({ className, label, id, placehold
   ) }) });
 });
 Textarea.displayName = "Textarea";
-function Card({ className, children, flush, ...rest }) {
+function Card({ className, children, flush, variant = "default", ...rest }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
       className: cn(
-        // Surface + border are theme tokens so the palette switcher (feedback
-        // #307) can re-skin every card; a caller's own bg-*/border-* override
-        // still wins via tailwind-merge.
-        "bg-[var(--bg-surface)]",
-        flush ? "border-y border-[var(--border)] md:rounded-lg md:border md:shadow-sm" : "rounded-lg border border-[var(--border)] shadow-sm",
+        variant === "inset" ? "rounded-md bg-[var(--bg-surface-2)] p-3" : cn(
+          // Surface + border are theme tokens so the palette switcher (feedback
+          // #307) can re-skin every card; a caller's own bg-*/border-* override
+          // still wins via tailwind-merge.
+          "bg-[var(--bg-surface)]",
+          flush ? "border-y border-[var(--border)] md:rounded-lg md:border md:shadow-sm" : "rounded-lg border border-[var(--border)] shadow-sm"
+        ),
         className
       ),
       children
@@ -528,7 +576,7 @@ function Spinner({ className, label, ...rest }) {
     " "
   ] }) });
 }
-function EmptyState({ title, hint, className, ...rest }) {
+function EmptyState({ title, hint, icon, action, className, ...rest }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -538,8 +586,10 @@ function EmptyState({ title, hint, 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 })
+        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 })
       ]
     }
   );
@@ -549,6 +599,10 @@ const DEFAULT_TABS_LABELS = {
   remove: (tab) => `Remove ${tab}`
 };
 const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-[var(--border)]";
+const TABLIST_VERTICAL_CLASSES = "flex flex-col gap-0.5";
+const TAB_VERTICAL_CLASSES = "flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
+const TAB_VERTICAL_ACTIVE_CLASSES = "bg-[var(--bg-active)] text-[var(--text-primary)]";
+const TAB_VERTICAL_INACTIVE_CLASSES = "text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]";
 const TABLIST_WRAP_CLASSES = "flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-[var(--border)]";
 const TAB_CLASSES = "whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
 const TAB_ACTIVE_CLASSES = "border-[var(--text-primary)] text-[var(--text-primary)]";
@@ -574,10 +628,13 @@ function Tabs({
   addLabel,
   labels,
   busy = false,
+  orientation = "horizontal",
   "aria-label": ariaLabel,
   ...rest
 }) {
   const text = useKitLabels("tabs", DEFAULT_TABS_LABELS, labels);
+  const phone = useMediaQuery(PHONE_QUERY, false);
+  const vertical = orientation === "vertical" && !phone;
   const stripRef = useRef(null);
   const isRemovable = (tab) => onRemove !== void 0 && tab.removable !== false;
   const deletesOnKey = (tab) => isRemovable(tab) && (removeOn === "every" || tab.id === active);
@@ -610,7 +667,7 @@ function Tabs({
       if (!busy) requestRemove(tab.id);
       return;
     }
-    const step = horizontalStep(e.key, e.currentTarget);
+    const step = vertical ? e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0 : horizontalStep(e.key, e.currentTarget);
     if (step === 0 && e.key !== "Home" && e.key !== "End") return;
     const strip = e.currentTarget.closest('[role="tablist"]');
     if (!strip) return;
@@ -628,8 +685,9 @@ function Tabs({
       ref: stripRef,
       role: "tablist",
       "aria-label": ariaLabel ?? label,
+      "aria-orientation": vertical ? "vertical" : void 0,
       className: cn(
-        wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,
+        vertical ? TABLIST_VERTICAL_CLASSES : wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,
         onAdd ? "min-w-0" : className
       ),
       children: tabs.map((tab) => {
@@ -656,21 +714,36 @@ function Tabs({
           id: isActive && panelId ? `${panelId}-tab` : void 0,
           "aria-keyshortcuts": deletesOnKey(tab) ? "Delete" : void 0,
           onKeyDown: (e) => onTabKeyDown(e, tab),
-          className: cn(
+          className: vertical ? cn(
+            TAB_VERTICAL_CLASSES,
+            isActive ? TAB_VERTICAL_ACTIVE_CLASSES : TAB_VERTICAL_INACTIVE_CLASSES,
+            removable && "pe-8"
+          ) : cn(
             wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,
             wrap ? isActive ? TAB_WRAP_ACTIVE_CLASSES : TAB_WRAP_INACTIVE_CLASSES : isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_CLASSES,
             removable && TAB_REMOVABLE_CLASSES
           )
         };
-        const inner = /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1.5", tab.empty && TAB_EMPTY_CLASSES), children: [
-          tab.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 items-center gap-0.5", children: tab.icon }),
-          tab.detail != null ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start text-start", children: [
-            /* @__PURE__ */ jsx("span", { children: tab.label }),
-            " ",
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-normal leading-tight text-[var(--text-muted)]", children: tab.detail })
-          ] }) : tab.label,
-          tab.badge != null ? tab.badge : null
-        ] });
+        const inner = /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              // In a side nav the row is the full width, so the label takes it and a
+              // badge lands at the row's end, where a column of counts lines up.
+              vertical ? "flex min-w-0 flex-1 items-center gap-1.5" : "inline-flex items-center gap-1.5",
+              tab.empty && TAB_EMPTY_CLASSES
+            ),
+            children: [
+              tab.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 items-center gap-0.5", children: tab.icon }),
+              tab.detail != null ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start text-start", children: [
+                /* @__PURE__ */ jsx("span", { children: tab.label }),
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-[11px] font-normal leading-tight text-[var(--text-muted)]", children: tab.detail })
+              ] }) : tab.label,
+              tab.badge != null ? vertical ? /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 items-center", children: tab.badge }) : tab.badge : null
+            ]
+          }
+        );
         const element = tab.href ? /* @__PURE__ */ jsx(
           "a",
           {
@@ -697,7 +770,7 @@ function Tabs({
           // The × cannot go INSIDE the tab: a button in a button is invalid HTML, and
           // a tab's children are presentational, so a reader would flatten it into the
           // tab's name. It sits beside the tab, over the gutter the tab reserves.
-          /* @__PURE__ */ jsxs("div", { className: "relative flex shrink-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("relative flex", !vertical && "shrink-0"), children: [
             element,
             isActive && /* @__PURE__ */ jsx(
               IconButton,
@@ -724,6 +797,15 @@ function Tabs({
     }
   );
   if (!onAdd) return tablist;
+  if (vertical) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5", className), children: [
+      tablist,
+      /* @__PURE__ */ jsxs("button", { type: "button", onClick: onAdd, disabled: busy, className: TAB_ADD_CLASSES, children: [
+        /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
+        addLabel ?? text.add
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {