@eifi1/ui-kit 0.5.1 → 0.6.0

package/dist/components/ui.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useState } from "react";
-import { ChevronDown, Eye, EyeOff, HelpCircle } from "lucide-react";
+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 { useMediaQuery } from "../hooks/use-media-query.js";
 import { Tooltip } from "./tooltip.js";
@@ -34,17 +34,37 @@ 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 [&_svg]:size-5";
-const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", className, ...rest }, ref) {
+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 = {
+  md: "size-9 [&_svg]:size-5",
+  sm: "size-8 [&_svg]:size-5",
+  xs: "size-7 rounded [&_svg]:size-4",
+  "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)]"
+};
+const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", tone = "default", stopPropagation, className, onClick, onKeyDown, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       ref,
       ...rest,
+      onClick: (e) => {
+        if (stopPropagation) e.stopPropagation();
+        onClick?.(e);
+      },
+      onKeyDown: (e) => {
+        if (stopPropagation && (e.key === "Enter" || e.key === " ")) e.stopPropagation();
+        onKeyDown?.(e);
+      },
       className: cn(
         ICON_BUTTON_BASE,
-        size === "sm" ? "size-8" : "size-9",
+        ICON_BUTTON_SIZES[size],
         buttonVariantClasses[variant],
+        ICON_BUTTON_TONES[tone],
         className
       )
     }
@@ -167,13 +187,31 @@ function FieldHint({
 function FieldLabel({ children, className, ...rest }) {
   return /* @__PURE__ */ jsx("span", { ...rest, className: cn(FLOATING_LABEL_STATIC, "z-10", className), children });
 }
+function Label({ required, size = "md", disabled, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...rest,
+      className: cn(
+        "inline-flex items-center gap-0.5 font-medium leading-none text-[var(--text-primary)]",
+        size === "sm" ? "text-xs" : "text-sm",
+        disabled && "cursor-default opacity-50",
+        className
+      ),
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[var(--danger)]", children: "*" })
+      ]
+    }
+  );
+}
 const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
-function useFieldError(error, invalid, describedBy) {
+function useFieldError(error, invalid, describedBy, ariaInvalid) {
   const errorId = useId();
   const hasError = error !== void 0 && error !== null && error !== false && error !== "";
   return {
     /** A field carrying a message that says what is wrong with it IS wrong. */
-    isInvalid: Boolean(invalid) || hasError,
+    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === "true",
     describedBy: hasError ? describedBy ? `${describedBy} ${errorId}` : errorId : describedBy,
     errorEl: hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error }) : null
   };
@@ -212,7 +250,8 @@ const Input = forwardRef(function Input2({
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"]
+    rest["aria-describedby"],
+    rest["aria-invalid"]
   );
   const asDisplay = useMediaQuery(PHONE_QUERY, false) && variant === "display";
   const isPassword = type === "password";
@@ -296,15 +335,19 @@ const Input = forwardRef(function Input2({
   ] }) });
 });
 Input.displayName = "Input";
-const Select = forwardRef(function Select2({ className, label, id, children, invalid, error, hint, ...rest }, ref) {
+const SELECT_SM = "h-7 py-0 pl-2 pr-7 text-xs";
+const Select = forwardRef(function Select2({ className, label, id, children, invalid, error, hint, size, selectClassName, ...rest }, ref) {
   const generated = useId();
+  const nativeSize = typeof size === "number" ? size : void 0;
+  const small = size === "sm" && label === void 0;
   const fieldId = id ?? generated;
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"]
+    rest["aria-describedby"],
+    rest["aria-invalid"]
   );
-  const chevron = rest.disabled ? null : /* @__PURE__ */ jsx(FieldChevron, {});
+  const chevron = rest.disabled ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "right-1.5 size-3.5" : void 0 });
   if (label === void 0) {
     return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
@@ -312,10 +355,17 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
         {
           ref,
           id,
+          size: nativeSize,
           ...rest,
           "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
           "aria-describedby": describedBy,
-          className: cn(FIELD_BASE, "appearance-none pr-9", isInvalid && FIELD_INVALID),
+          className: cn(
+            FIELD_BASE,
+            "appearance-none pr-9",
+            small && SELECT_SM,
+            selectClassName,
+            isInvalid && FIELD_INVALID
+          ),
           children
         }
       ),
@@ -328,6 +378,7 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
       {
         ref,
         id: fieldId,
+        size: nativeSize,
         ...rest,
         "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
         "aria-describedby": describedBy,
@@ -335,6 +386,7 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
           FIELD_BASE,
           FIELD_FLOATING_PAD,
           "peer appearance-none pr-9",
+          selectClassName,
           isInvalid && FIELD_INVALID
         ),
         children
@@ -350,7 +402,8 @@ const Textarea = forwardRef(function Textarea2({ className, label, id, placehold
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"]
+    rest["aria-describedby"],
+    rest["aria-invalid"]
   );
   if (label === void 0) {
     return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsx(
@@ -485,6 +538,10 @@ function EmptyState({ title, hint, className, ...rest }) {
     }
   );
 }
+const DEFAULT_TABS_LABELS = {
+  add: "Add tab",
+  remove: (tab) => `Remove ${tab}`
+};
 const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-[var(--border)]";
 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)]";
@@ -493,6 +550,10 @@ const TAB_INACTIVE_CLASSES = "border-transparent text-[var(--text-muted)] hover:
 const TAB_WRAP_CLASSES = "whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm";
 const TAB_WRAP_ACTIVE_CLASSES = "bg-[var(--brand)] text-[var(--brand-contrast)] md:border-[var(--text-primary)] md:text-[var(--text-primary)]";
 const TAB_WRAP_INACTIVE_CLASSES = "bg-[var(--bg-surface)] text-[var(--text-primary)] md:border-transparent md:text-[var(--text-muted)] md:hover:border-[var(--border-strong)] md:hover:text-[var(--text-secondary)]";
+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";
 function Tabs({
   tabs,
   active,
@@ -501,10 +562,46 @@ function Tabs({
   wrap = false,
   label,
   panelId,
+  onRemove,
+  onAdd,
+  addLabel,
+  labels,
+  busy = false,
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const onTabKeyDown = (e) => {
+  const text = useKitLabels("tabs", DEFAULT_TABS_LABELS, labels);
+  const stripRef = useRef(null);
+  const isRemovable = (tab) => onRemove !== void 0 && tab.removable !== false;
+  const nameOf = (tab) => tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
+  const pendingFocus = useRef(null);
+  const requestRemove = (id) => {
+    const index = tabs.findIndex((t) => t.id === id);
+    pendingFocus.current = {
+      removed: id,
+      wasActive: id === active,
+      neighbour: (tabs[index + 1] ?? tabs[index - 1])?.id
+    };
+    onRemove?.(id);
+  };
+  useLayoutEffect(() => {
+    const pending = pendingFocus.current;
+    if (!pending || tabs.some((t) => t.id === pending.removed)) return;
+    pendingFocus.current = null;
+    const strip = stripRef.current;
+    if (!strip) return;
+    const focused = document.activeElement;
+    if (focused && focused !== document.body && !strip.contains(focused)) return;
+    const target = !pending.wasActive && tabs.some((t) => t.id === pending.neighbour) ? pending.neighbour : active;
+    const index = tabs.findIndex((t) => t.id === target);
+    strip.querySelectorAll('[role="tab"]')[index]?.focus();
+  }, [tabs, active]);
+  const onTabKeyDown = (e, tab) => {
+    if (e.key === "Delete" && isRemovable(tab)) {
+      e.preventDefault();
+      if (!busy) requestRemove(tab.id);
+      return;
+    }
     const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
     if (step === 0 && e.key !== "Home" && e.key !== "End") return;
     const strip = e.currentTarget.closest('[role="tablist"]');
@@ -516,15 +613,20 @@ function Tabs({
     const to = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : (from + step + items.length) % items.length;
     items[to]?.focus();
   };
-  return /* @__PURE__ */ jsx(
+  const tablist = /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
+      ref: stripRef,
       role: "tablist",
       "aria-label": ariaLabel ?? label,
-      className: cn(wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES, className),
+      className: cn(
+        wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,
+        onAdd ? "min-w-0" : className
+      ),
       children: tabs.map((tab) => {
         const isActive = tab.id === active;
+        const removable = isRemovable(tab);
         const shared = {
           role: "tab",
           "aria-selected": isActive,
@@ -544,17 +646,24 @@ function Tabs({
           // Only the open tab: see `panelId`.
           "aria-controls": isActive ? panelId : void 0,
           id: isActive && panelId ? `${panelId}-tab` : void 0,
-          onKeyDown: onTabKeyDown,
+          "aria-keyshortcuts": removable ? "Delete" : void 0,
+          onKeyDown: (e) => onTabKeyDown(e, tab),
           className: cn(
             wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,
-            wrap ? isActive ? TAB_WRAP_ACTIVE_CLASSES : TAB_WRAP_INACTIVE_CLASSES : isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_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: "inline-flex items-center gap-1.5", children: [
-          tab.label,
+        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
         ] });
-        return tab.href ? /* @__PURE__ */ jsx(
+        const element = tab.href ? /* @__PURE__ */ jsx(
           "a",
           {
             ...shared,
@@ -566,7 +675,7 @@ function Tabs({
               onChange(tab.id);
             },
             onKeyDown: (e) => {
-              onTabKeyDown(e);
+              onTabKeyDown(e, tab);
               if (e.defaultPrevented || e.key !== " ") return;
               e.preventDefault();
               onChange(tab.id);
@@ -575,9 +684,72 @@ function Tabs({
           },
           tab.id
         ) : /* @__PURE__ */ jsx("button", { ...shared, onClick: () => onChange(tab.id), children: inner }, tab.id);
+        if (!removable) return element;
+        return (
+          // 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: [
+            element,
+            isActive && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "2xs",
+                tone: "danger",
+                tabIndex: -1,
+                type: "button",
+                "aria-label": text.remove(nameOf(tab)),
+                disabled: busy,
+                onClick: () => requestRemove(tab.id),
+                className: cn(
+                  "absolute inset-y-0 end-1 my-auto",
+                  // On a wrapped strip's filled chip the quiet grey would vanish into
+                  // the brand fill below `md`.
+                  wrap && "text-[var(--brand-contrast)] md:text-[var(--text-placeholder)]"
+                ),
+                children: /* @__PURE__ */ jsx(X, {})
+              }
+            )
+          ] }, tab.id)
+        );
       })
     }
   );
+  if (!onAdd) return tablist;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        wrap ? "flex flex-wrap items-end gap-1.5 md:flex-nowrap md:gap-0" : "flex items-end",
+        className
+      ),
+      children: [
+        tablist,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-1 items-center",
+              wrap ? "md:self-stretch md:border-b md:border-[var(--border)]" : "self-stretch border-b border-[var(--border)]"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onAdd,
+                disabled: busy,
+                className: cn(TAB_ADD_CLASSES, wrap && TAB_ADD_WRAP_CLASSES),
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
+                  addLabel ?? text.add
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   Button,
@@ -589,6 +761,7 @@ export {
   CardHeader,
   CardTitle,
   DEFAULT_PASSWORD_REVEAL_LABELS,
+  DEFAULT_TABS_LABELS,
   EmptyState,
   FIELD_BASE,
   FIELD_DISPLAY,
@@ -605,6 +778,7 @@ export {
   FloatingField,
   IconButton,
   Input,
+  Label,
   PHONE_QUERY,
   Select,
   Spinner,