@eifi1/ui-kit 0.15.5 → 0.16.0

package/dist/components/ui.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
+import { createContext, forwardRef, useContext, useId, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDown, Eye, EyeOff, HelpCircle, Plus, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { scrollIntoStrip, useStripFade } from "../lib/strip-fade.js";
@@ -297,6 +297,23 @@ const ICON_BUTTON_GLYPH_SIZES = {
   24: "[&_svg]:size-6",
   28: "[&_svg]:size-7"
 };
+const ICON_BUTTON_SPINNER = {
+  "2xl": "size-7",
+  xl: "size-6",
+  lg: "size-5",
+  md: "size-5",
+  sm: "size-5",
+  xs: "size-4",
+  "2xs": "size-3.5"
+};
+const ICON_BUTTON_SPINNER_GLYPH = {
+  12: "size-3",
+  14: "size-3.5",
+  16: "size-4",
+  20: "size-5",
+  24: "size-6",
+  28: "size-7"
+};
 const ICON_BUTTON_TONE_PAIR = "[--icon-button-tone:var(--icon-button-tone-light)] dark:[--icon-button-tone:var(--icon-button-tone-dark)]";
 function toneColorStyle(toneColor, style) {
   if (toneColor === void 0) return style;
@@ -364,6 +381,7 @@ function IconButtonLink({
   tooltip = true,
   tooltipSide,
   tooltipPortal,
+  tooltipLazy = true,
   glyphSize,
   badge,
   className,
@@ -440,7 +458,17 @@ function IconButtonLink({
   if (!tooltip || label === void 0 || label === "") return control;
   return (
     // A fragment, as on the button: the bubble says what `aria-label` already does.
-    /* @__PURE__ */ jsx(Tooltip, { label, side: tooltipSide, portal: tooltipPortal, className: stretch ? "self-stretch" : void 0, children: /* @__PURE__ */ jsx(Fragment, { children: control }) })
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        label,
+        side: tooltipSide,
+        portal: tooltipPortal,
+        lazy: tooltipLazy,
+        className: stretch ? "self-stretch" : void 0,
+        children: /* @__PURE__ */ jsx(Fragment, { children: control })
+      }
+    )
   );
 }
 function IconButtonElement({
@@ -457,7 +485,9 @@ function IconButtonElement({
   tooltip = true,
   tooltipSide,
   tooltipPortal,
+  tooltipLazy = true,
   disabledReason,
+  pending,
   glyphSize,
   badge,
   disabledStyle = "dim",
@@ -465,6 +495,7 @@ function IconButtonElement({
   style,
   onClick,
   onKeyDown,
+  children,
   href: _href,
   renderLink: _renderLink,
   external: _external,
@@ -477,21 +508,23 @@ function IconButtonElement({
   const keep = disabledStyle === "keep";
   const reasonId = useId();
   const locked = hasContent(disabledReason);
+  const inert = locked || Boolean(pending);
   const ownDescribedBy = rest["aria-describedby"];
   const button = /* @__PURE__ */ jsx(
     "button",
     {
       ref,
       ...rest,
-      disabled: locked ? void 0 : rest.disabled,
-      "aria-disabled": locked || rest["aria-disabled"],
+      disabled: inert ? void 0 : rest.disabled,
+      "aria-disabled": inert || rest["aria-disabled"],
+      "aria-busy": pending || rest["aria-busy"],
       "aria-describedby": locked ? ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId : ownDescribedBy,
       "aria-label": rest["aria-label"] ?? label,
       "aria-pressed": pressed ?? rest["aria-pressed"],
       style: toneColorStyle(toneColor, style),
       onClick: (e) => {
         if (stopPropagation) e.stopPropagation();
-        if (locked) {
+        if (inert) {
           e.preventDefault();
           return;
         }
@@ -507,8 +540,23 @@ function IconButtonElement({
         // The disabled look for the focusable kind of disabled, as on Button.
         locked && (keep ? "cursor-default" : "cursor-not-allowed opacity-50"),
         keep && "disabled:cursor-default disabled:opacity-100",
+        pending && "cursor-progress",
         className
-      )
+      ),
+      children: pending ? (
+        // Decorative, as on Button: `aria-busy` says it. Sized to the glyph it stands
+        // in for, in the glyph's colour, so the swap does not change the button's look.
+        /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            label: null,
+            className: cn(
+              "border-current/30 border-t-current",
+              glyphSize !== void 0 ? ICON_BUTTON_SPINNER_GLYPH[glyphSize] : ICON_BUTTON_SPINNER[size]
+            )
+          }
+        )
+      ) : children
     }
   );
   const control = withIconButtonBadge(button, badge, stretch);
@@ -534,8 +582,18 @@ function IconButtonElement({
   if (!tooltip || label === void 0 || label === "") return control;
   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, className: stretch ? "self-stretch" : void 0, children: /* @__PURE__ */ jsx(Fragment, { children: control }) })
+    // exactly what `aria-label` already does. Lazy by default — see `tooltipLazy`.
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        label,
+        side: tooltipSide,
+        portal: tooltipPortal,
+        lazy: tooltipLazy,
+        className: stretch ? "self-stretch" : void 0,
+        children: /* @__PURE__ */ jsx(Fragment, { children: control })
+      }
+    )
   );
 }
 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)]";
@@ -827,27 +885,37 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
   const chevron = rest.disabled || listBox ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "end-1.5 size-3.5" : void 0 });
   const dress = listBox ? "overflow-y-auto [&_option]:py-1" : "appearance-none pe-9";
   if (label === void 0) {
+    const select = /* @__PURE__ */ jsx(
+      "select",
+      {
+        ref,
+        id,
+        size: nativeSize,
+        ...rest,
+        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+        "aria-describedby": describedBy,
+        className: cn(
+          FIELD_BASE,
+          dress,
+          listBox && "py-0",
+          small && SELECT_SM,
+          selectClassName,
+          isInvalid && FIELD_INVALID
+        ),
+        children
+      }
+    );
+    if (hasContent(hint) && !textHint) {
+      return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", className), children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+          select,
+          chevron
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
+      ] }) });
+    }
     return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-      /* @__PURE__ */ jsx(
-        "select",
-        {
-          ref,
-          id,
-          size: nativeSize,
-          ...rest,
-          "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
-          "aria-describedby": describedBy,
-          className: cn(
-            FIELD_BASE,
-            dress,
-            listBox && "py-0",
-            small && SELECT_SM,
-            selectClassName,
-            isInvalid && FIELD_INVALID
-          ),
-          children
-        }
-      ),
+      select,
       chevron
     ] }) });
   }
@@ -943,13 +1011,37 @@ const CARD_PADDING = {
   sm: "p-3",
   md: "p-4"
 };
-function Card({ className, children, flush, variant = "default", tone, padding, ...rest }) {
+const CARD_PADDING_STRONG = {
+  none: "p-0",
+  sm: "p-[11px]",
+  md: "p-[15px]"
+};
+const CARD_TONES_STRONG = {
+  warning: "border-2 border-[var(--warning)]",
+  danger: "border-2 border-[var(--danger-border-strong)]",
+  info: "border-2 border-[var(--info)]",
+  success: "border-2 border-[var(--success)]"
+};
+const CardPaddedContext = createContext(false);
+function Card({
+  className,
+  children,
+  flush,
+  variant = "default",
+  tone,
+  toneStrength = "soft",
+  padding,
+  ...rest
+}) {
   const toned = tone ? CARD_TONES[tone] : void 0;
   const bordered = variant !== "inset";
+  const strong = toned !== void 0 && bordered && toneStrength === "strong";
+  const ownPadding = padding ?? (variant === "inset" ? "sm" : variant === "outline" ? "md" : void 0);
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-tone": tone,
+      "data-tone-strength": strong ? "strong" : void 0,
       ...rest,
       className: cn(
         variant === "inset" ? "rounded-md bg-[var(--bg-surface-2)] p-3" : variant === "outline" ? (
@@ -963,15 +1055,17 @@ function Card({ className, children, flush, variant = "default", tone, padding,
           flush ? "border-y border-[var(--border)] md:rounded-lg md:border md:shadow-sm" : "rounded-lg border border-[var(--border)] shadow-sm"
         ),
         toned && (bordered ? toned.border : toned.fill),
+        strong && tone && CARD_TONES_STRONG[tone],
         toned?.title,
-        padding && CARD_PADDING[padding],
+        ownPadding && (strong ? CARD_PADDING_STRONG : CARD_PADDING)[ownPadding],
         className
       ),
-      children
+      children: /* @__PURE__ */ jsx(CardPaddedContext.Provider, { value: ownPadding !== void 0, children })
     }
   );
 }
-function CardHeader({ className, ...props }) {
+function CardHeader({ className, stackAction = false, ...props }) {
+  const padded = useContext(CardPaddedContext);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -979,29 +1073,37 @@ function CardHeader({ className, ...props }) {
       className: cn(
         // Grid (not flex) so CardAction can occupy a top-right column; with no
         // action it collapses to one column and title/description stack.
-        "grid auto-rows-min items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+        //
+        // The two-column switch sets a VARIABLE, not `grid-template-columns`. As
+        // `has-data-[slot=card-action]:grid-cols-[1fr_auto]` it was two classes of
+        // specificity (the class plus the attribute inside `:has()`), and a caller's
+        // `max-sm:grid-cols-1` — one class inside a media query — lost to it at every
+        // width, so the action could never be stacked on a phone from outside. Now the
+        // property itself is set by a plain one-class utility that any `grid-cols-*`
+        // variant of the caller's outranks by coming later in the sheet; the `:has()`
+        // rule only picks the value. The base `1fr` resets the variable so a header
+        // never inherits an ancestor header's two columns.
+        "grid auto-rows-min items-start gap-1.5 [--card-header-cols:1fr] has-data-[slot=card-action]:[--card-header-cols:1fr_auto] grid-cols-[var(--card-header-cols,1fr)]",
+        padded ? "px-0 pt-0" : "px-6 pt-6",
+        // One column under `sm`, and the action back into the flow (DOM order, so
+        // after the description when it is written after it), at the start edge.
+        // The descendant selector outranks CardAction's own placement classes.
+        stackAction && "max-sm:grid-cols-1 max-sm:[&>[data-slot=card-action]]:col-start-1 max-sm:[&>[data-slot=card-action]]:row-span-1 max-sm:[&>[data-slot=card-action]]:row-start-auto max-sm:[&>[data-slot=card-action]]:justify-self-start",
         className
       ),
       ...props
     }
   );
 }
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-title",
-      className: cn("font-semibold leading-none", className),
-      ...props
-    }
-  );
+function CardTitle({ className, as: Tag = "div", ...props }) {
+  return /* @__PURE__ */ jsx(Tag, { "data-slot": "card-title", className: cn("font-semibold leading-none", className), ...props });
 }
 function CardDescription({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "card-description",
-      className: cn("text-sm text-[var(--money-neutral)]", className),
+      className: cn("text-sm text-[var(--text-muted)]", className),
       ...props
     }
   );
@@ -1017,14 +1119,16 @@ function CardAction({ className, ...props }) {
   );
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "card-content", className: cn("px-6 last:pb-6", className), ...props });
+  const padded = useContext(CardPaddedContext);
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-content", className: cn(!padded && "px-6 last:pb-6", className), ...props });
 }
 function CardFooter({ className, ...props }) {
+  const padded = useContext(CardPaddedContext);
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "card-footer",
-      className: cn("flex items-center px-6 pb-6", className),
+      className: cn("flex items-center", !padded && "px-6 pb-6", className),
       ...props
     }
   );