@eifi1/ui-kit 0.14.1 → 0.15.0

package/dist/components/ui.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, 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";
 import { horizontalStep } from "../lib/direction.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { Tooltip } from "./tooltip.js";
@@ -546,7 +547,8 @@ const PHONE_QUERY = "(max-width: 767px)";
 const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
 const FIELD_TRIGGER = cn(
   FIELD_BASE,
-  "relative flex items-center justify-between gap-2 text-start hover:bg-[var(--bg-hover)]"
+  "relative flex items-center justify-between gap-2 text-start hover:bg-[var(--bg-hover)]",
+  "[&>:first-child]:min-h-[1lh]"
 );
 function FieldChevron({ className, ...rest }) {
   return /* @__PURE__ */ jsx(
@@ -808,16 +810,24 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
   const listBox = nativeSize !== void 0 && nativeSize > 1 || Boolean(rest.multiple);
   const small = size === "sm" && label === void 0;
   const fieldId = id ?? generated;
+  const hintId = useId();
+  const textHint = typeof hint === "string" && hint !== "" || typeof hint === "number";
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"],
+    // The caption goes in BEFORE the error — the standing advice first, the news
+    // second, the order useFieldError keeps for a caller's own description.
+    textHint ? rest["aria-describedby"] ? `${rest["aria-describedby"]} ${hintId}` : hintId : rest["aria-describedby"],
     rest["aria-invalid"]
   );
+  const below = textHint || errorEl !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-[11px] leading-tight text-[var(--text-muted)]", children: hint }),
+    errorEl
+  ] }) : null;
   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" : "appearance-none pe-9";
+  const dress = listBox ? "overflow-y-auto [&_option]:py-1" : "appearance-none pe-9";
   if (label === void 0) {
-    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
         "select",
         {
@@ -830,6 +840,7 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
           className: cn(
             FIELD_BASE,
             dress,
+            listBox && "py-0",
             small && SELECT_SM,
             selectClassName,
             isInvalid && FIELD_INVALID
@@ -840,7 +851,7 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
       chevron
     ] }) });
   }
-  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, staticLabel: true, hint, children: [
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl: below, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, staticLabel: true, hint: textHint ? void 0 : hint, children: [
     /* @__PURE__ */ jsx(
       "select",
       {
@@ -853,8 +864,9 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
         className: cn(
           FIELD_BASE,
           // The floated label takes the top strip of a list box too, so its first
-          // row starts under the label rather than behind it.
-          listBox ? "pt-5 pb-1" : FIELD_FLOATING_PAD,
+          // row starts under the label rather than behind it. No bottom padding — see
+          // `dress`.
+          listBox ? "pt-5 pb-0" : FIELD_FLOATING_PAD,
           "peer",
           dress,
           selectClassName,
@@ -1131,6 +1143,7 @@ const TAB_REMOVABLE_CLASSES = "pe-8 md:pe-8";
 const TAB_EMPTY_CLASSES = "-mx-1.5 rounded border border-dashed border-[var(--border-strong)] px-1.5";
 const TAB_ADD_CLASSES = "inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4";
 const TAB_ADD_WRAP_CLASSES = "px-2.5 text-xs md:px-3 md:text-sm";
+const TAB_ADD_PHONE_CLASSES = "relative max-md:px-2";
 function Tabs({
   tabs,
   active,
@@ -1153,6 +1166,12 @@ function Tabs({
   const phone = useMediaQuery(PHONE_QUERY, false);
   const vertical = orientation === "vertical" && !phone;
   const stripRef = useRef(null);
+  const fade = useStripFade(stripRef);
+  useLayoutEffect(() => {
+    const strip = stripRef.current;
+    const tab = strip?.querySelector('[role="tab"][aria-selected="true"]');
+    if (strip && tab) scrollIntoStrip(strip, tab);
+  }, [active]);
   const isRemovable = (tab) => onRemove !== void 0 && tab.removable !== false;
   const deletesOnKey = (tab) => isRemovable(tab) && (removeOn === "every" || tab.id === active);
   const nameOf = (tab) => tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
@@ -1203,6 +1222,8 @@ function Tabs({
       role: "tablist",
       "aria-label": ariaLabel ?? label,
       "aria-orientation": vertical ? "vertical" : void 0,
+      style: fade.mask ? { ...rest.style, maskImage: fade.mask, WebkitMaskImage: fade.mask } : rest.style,
+      "data-overflow": fade.overflow,
       className: cn(
         vertical ? TABLIST_VERTICAL_CLASSES : wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,
         onAdd ? "min-w-0" : className
@@ -1255,7 +1276,20 @@ function Tabs({
               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 })
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-[11px] font-normal leading-tight text-[var(--text-muted)]",
+                      // On a wrapped strip's filled chip (below `md`) the muted grey
+                      // was dark text on the brand fill — "loop 2" all but vanished
+                      // under the one label that most needed reading. It takes the
+                      // chip's own ink instead, as the label and the × already do.
+                      wrap && isActive && !vertical && "text-[var(--brand-contrast)] md: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
             ]
@@ -1345,10 +1379,10 @@ function Tabs({
                 type: "button",
                 onClick: onAdd,
                 disabled: busy,
-                className: cn(TAB_ADD_CLASSES, wrap && TAB_ADD_WRAP_CLASSES),
+                className: cn(TAB_ADD_CLASSES, wrap ? TAB_ADD_WRAP_CLASSES : TAB_ADD_PHONE_CLASSES),
                 children: [
                   /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
-                  addLabel ?? text.add
+                  /* @__PURE__ */ jsx("span", { className: wrap ? void 0 : "max-md:sr-only", children: addLabel ?? text.add })
                 ]
               }
             )