@eifi1/ui-kit 0.10.0 → 0.12.0

package/dist/components/ui.js

@@ -6,7 +6,8 @@ import { cn } from "../lib/cn.js";
 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";
+import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
+import { pickLinkRenderer } from "./text-link.js";
 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",
@@ -32,6 +33,10 @@ const BUTTON_TONES = {
   danger: "text-[var(--text-secondary)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)] disabled:hover:text-[var(--text-secondary)]"
 };
 const TONED_VARIANTS = /* @__PURE__ */ new Set(["link", "ghost"]);
+const BUTTON_BOXED_DANGER = {
+  secondary: "border-[var(--danger-border)] bg-transparent text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border)]",
+  primary: "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)] hover:border-[var(--danger)] hover:bg-[var(--danger)] hover:text-[var(--danger-contrast)] focus:ring-[var(--danger-border)] disabled:hover:border-[var(--danger-border)] disabled:hover:bg-[var(--danger-bg)] disabled:hover:text-[var(--danger)]"
+};
 const BUTTON_LINK_PRESSED = "font-medium text-[var(--brand)] hover:text-[var(--brand)] disabled:hover:text-[var(--brand)]";
 function buttonClasses(variant = "primary", classNameOrOptions) {
   const { size = "md", className } = typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
@@ -40,49 +45,151 @@ function buttonClasses(variant = "primary", classNameOrOptions) {
 function hasContent(node) {
   return node !== void 0 && node !== null && node !== false && node !== "";
 }
-function Button({
+function buttonLook(variant, size, stretch, tone) {
+  return 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.
+    stretch && "self-stretch",
+    buttonVariantClasses[variant],
+    tone !== "default" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],
+    tone === "danger" && BUTTON_BOXED_DANGER[variant]
+  );
+}
+function Button(props) {
+  if (props.href !== void 0) return /* @__PURE__ */ jsx(ButtonLink, { ...props });
+  return /* @__PURE__ */ jsx(ButtonElement, { ...props });
+}
+function RenderedButtonLink({ render, ...props }) {
+  return render(props);
+}
+function ButtonLink({
+  href,
+  renderLink,
+  external,
+  disabled,
+  variant = "primary",
+  size = "md",
+  stretch,
+  tone = "default",
+  className,
+  children,
+  target,
+  rel,
+  onClick,
+  ...rest
+}) {
+  const kitLink = useKitLink();
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const Link = pickLinkRenderer(renderLink, kitLink, href);
+  const newTab = !disabled && (external || target === "_blank");
+  const cls = cn(
+    buttonLook(variant, size, stretch, tone),
+    // `relative` holds the sr-only note (see sr-only-containment.test).
+    newTab && "relative",
+    // BUTTON_BASE's `disabled:` classes never match an `<a>`; no pointer events also
+    // keeps the hover fill from lighting up on something that refuses the click.
+    disabled && "pointer-events-none cursor-not-allowed opacity-50",
+    className
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    newTab && " ",
+    newTab && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      "(",
+      common.opensInNewTab,
+      ")"
+    ] })
+  ] });
+  if (disabled) {
+    return /* @__PURE__ */ jsx("a", { ...rest, role: "link", "aria-disabled": "true", className: cls, children: body });
+  }
+  if (external || !Link) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...rest,
+        href,
+        target: external ? "_blank" : target,
+        rel: external ? rel ?? "noopener noreferrer" : rel,
+        onClick,
+        className: cls,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    RenderedButtonLink,
+    {
+      render: Link,
+      ...rest,
+      href,
+      target,
+      rel,
+      onClick,
+      className: cls,
+      children: body
+    }
+  );
+}
+function ButtonElement({
   variant = "primary",
   size = "md",
   stretch,
   tone = "default",
   pressed,
   disabledReason,
+  pending,
   className,
   onClick,
+  children,
+  href: _href,
+  renderLink: _renderLink,
+  external: _external,
   ...rest
 }) {
   const reasonId = useId();
   const locked = hasContent(disabledReason);
+  const inert = locked || Boolean(pending);
   const ownDescribedBy = rest["aria-describedby"];
   const button = /* @__PURE__ */ jsx(
     "button",
     {
       ...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-pressed": pressed ?? rest["aria-pressed"],
       onClick: (e) => {
-        if (locked) {
+        if (inert) {
           e.preventDefault();
           return;
         }
         onClick?.(e);
       },
       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.
-        stretch && "self-stretch",
-        buttonVariantClasses[variant],
-        tone !== "default" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],
+        buttonLook(variant, size, stretch, tone),
         pressed && (variant === "link" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),
         // The disabled look for the focusable kind of disabled.
         locked && "cursor-not-allowed opacity-50",
+        // No dimming while pending: the spinner IS the state, and at half opacity it
+        // would be the faintest thing on the button. `relative` anchors it.
+        pending && "relative cursor-progress",
         className
-      )
+      ),
+      children: pending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center gap-[inherit] opacity-0", children }),
+        /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            label: null,
+            className: "absolute inset-0 m-auto size-4 border-current/30 border-t-current"
+          }
+        )
+      ] }) : children
     }
   );
   if (!locked) return button;
@@ -99,6 +206,12 @@ function Button({
 }
 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 = {
+  // 64px with a 28px glyph: a camera's shutter (keksdose invoices/camera-capture.tsx:248,
+  // `size-16` by hand) — the one control of a full-screen capture view, thumb-sized.
+  "2xl": "size-16 [&_svg]:size-7",
+  // 48px with a 24px glyph: the one primary action of a phone screen or sheet, a step
+  // past the 44px minimum rather than on it.
+  xl: "size-12 [&_svg]:size-6",
   // 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",
@@ -107,6 +220,15 @@ const ICON_BUTTON_SIZES = {
   xs: "size-7 rounded [&_svg]:size-4",
   "2xs": "size-6 rounded [&_svg]:size-3.5"
 };
+const ICON_BUTTON_STRETCH_SIZES = {
+  "2xl": "w-16 min-h-16 self-stretch [&_svg]:size-7",
+  xl: "w-12 min-h-12 self-stretch [&_svg]:size-6",
+  lg: "w-11 min-h-11 self-stretch [&_svg]:size-5",
+  md: "w-9 min-h-9 self-stretch [&_svg]:size-5",
+  sm: "w-8 min-h-8 self-stretch [&_svg]:size-5",
+  xs: "w-7 min-h-7 self-stretch rounded [&_svg]:size-4",
+  "2xs": "w-6 min-h-6 self-stretch rounded [&_svg]:size-3.5"
+};
 const ICON_BUTTON_TONES = {
   danger: {
     quiet: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]",
@@ -119,10 +241,27 @@ const ICON_BUTTON_TONES = {
   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)]"
+  },
+  success: {
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--success-bg)] hover:text-[var(--success)] focus:ring-[var(--success-border)]",
+    toned: "text-[var(--success)] hover:bg-[var(--success-bg)] focus:ring-[var(--success-border)]"
+  },
+  // The hover fill and the ring are MIXED from the one colour, since a custom tone
+  // brings no `-bg` / `-border` pair of its own. The fallback is the body colour, so a
+  // `custom` tone with no colour set is the default look rather than invisible.
+  custom: {
+    quiet: "text-[var(--text-placeholder)] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] hover:text-[var(--icon-button-tone,var(--text-primary))] focus:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]",
+    toned: "text-[var(--icon-button-tone,var(--text-primary))] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] focus:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]"
   }
 };
 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 };
+const QUIET_BY_DEFAULT = {
+  danger: true,
+  warning: false,
+  info: false,
+  success: false,
+  custom: false
+};
 function iconButtonToneClass(tone, quiet) {
   if (tone === "default") return "";
   if (tone === "muted") return cn(ICON_BUTTON_MUTED, ICON_BUTTON_QUIET_DISABLED_REST);
@@ -137,36 +276,67 @@ const ICON_BUTTON_DISABLED_REST = {
   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)]"
+  overlay: "disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]",
+  shutter: "disabled:hover:bg-[var(--media-scrim)]"
 };
 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 ICON_BUTTON_SHUTTER = "rounded-full border-4 border-[var(--media-ink)] bg-[var(--media-scrim)] text-[var(--media-ink)] backdrop-blur-sm hover:bg-[var(--media-scrim-hover)] focus:ring-[var(--media-ink)] focus:ring-offset-2 focus:ring-offset-[var(--media-scrim-hover)]";
+const ICON_BUTTON_GLYPH_SIZES = {
+  12: "[&_svg]:size-3",
+  14: "[&_svg]:size-3.5",
+  16: "[&_svg]:size-4",
+  20: "[&_svg]:size-5",
+  24: "[&_svg]:size-6",
+  28: "[&_svg]:size-7"
+};
 const IconButton = forwardRef(function IconButton2({
   variant = "ghost",
   size = "md",
-  tone = "default",
+  tone: toneProp,
   quiet,
   pressed,
   stopPropagation,
+  stretch,
+  shape = "square",
+  toneColor,
   label,
   tooltip = true,
   tooltipSide,
   tooltipPortal,
+  disabledReason,
+  glyphSize,
+  badge,
+  disabledStyle = "dim",
   className,
+  style,
   onClick,
   onKeyDown,
   ...rest
 }, ref) {
+  const tone = toneProp ?? (toneColor !== void 0 ? "custom" : "default");
+  const keep = disabledStyle === "keep";
+  const reasonId = useId();
+  const locked = hasContent(disabledReason);
+  const ownDescribedBy = rest["aria-describedby"];
   const button = /* @__PURE__ */ jsx(
     "button",
     {
       ref,
       ...rest,
+      disabled: locked ? void 0 : rest.disabled,
+      "aria-disabled": locked || rest["aria-disabled"],
+      "aria-describedby": locked ? ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId : ownDescribedBy,
       "aria-label": rest["aria-label"] ?? label,
       "aria-pressed": pressed ?? rest["aria-pressed"],
+      style: toneColor !== void 0 ? { ...style, ["--icon-button-tone"]: toneColor } : style,
       onClick: (e) => {
         if (stopPropagation) e.stopPropagation();
+        if (locked) {
+          e.preventDefault();
+          return;
+        }
         onClick?.(e);
       },
       onKeyDown: (e) => {
@@ -175,21 +345,57 @@ const IconButton = forwardRef(function IconButton2({
       },
       className: cn(
         ICON_BUTTON_BASE,
-        ICON_BUTTON_SIZES[size],
+        stretch ? ICON_BUTTON_STRETCH_SIZES[size] : ICON_BUTTON_SIZES[size],
+        glyphSize !== void 0 && ICON_BUTTON_GLYPH_SIZES[glyphSize],
         // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
-        variant === "overlay" ? ICON_BUTTON_OVERLAY : buttonVariantClasses[variant],
+        variant === "overlay" ? ICON_BUTTON_OVERLAY : variant === "shutter" ? ICON_BUTTON_SHUTTER : buttonVariantClasses[variant],
+        shape === "round" && "rounded-full",
         ICON_BUTTON_DISABLED_REST[variant],
         iconButtonToneClass(tone, quiet),
         pressed && ICON_BUTTON_PRESSED,
+        // 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",
         className
       )
     }
   );
-  if (!tooltip || label === void 0 || label === "") return button;
+  const control = hasContent(badge) ? /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", stretch && "self-stretch"), children: [
+    button,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        "data-slot": "icon-button-badge",
+        className: "pointer-events-none absolute -end-0.5 -bottom-0.5 inline-flex rounded-full bg-[var(--bg-surface)] [&_svg]:size-3",
+        children: badge
+      }
+    )
+  ] }) : button;
+  if (locked) {
+    return (
+      // Button's shape: the button and the hidden reason in a FRAGMENT, so Tooltip does
+      // not add its bubble to the description as well.
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          label: disabledReason,
+          side: tooltipSide,
+          portal: tooltipPortal,
+          className: stretch ? "self-stretch" : void 0,
+          children: /* @__PURE__ */ jsxs(Fragment, { children: [
+            control,
+            /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: disabledReason })
+          ] })
+        }
+      )
+    );
+  }
+  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, children: /* @__PURE__ */ jsx(Fragment, { children: button }) })
+    /* @__PURE__ */ jsx(Tooltip, { label, side: tooltipSide, portal: tooltipPortal, className: stretch ? "self-stretch" : void 0, children: /* @__PURE__ */ jsx(Fragment, { children: control }) })
   );
 });
 IconButton.displayName = "IconButton";
@@ -560,19 +766,55 @@ const Textarea = forwardRef(function Textarea2({ className, label, id, placehold
   ) }) });
 });
 Textarea.displayName = "Textarea";
-function Card({ className, children, flush, variant = "default", ...rest }) {
+const CARD_TONES = {
+  warning: {
+    border: "border-[var(--warning-border)]",
+    fill: "bg-[var(--warning-bg)]",
+    title: "[&_[data-slot=card-title]]:text-[var(--warning)]"
+  },
+  danger: {
+    border: "border-[var(--danger-border)]",
+    fill: "bg-[var(--danger-bg)]",
+    title: "[&_[data-slot=card-title]]:text-[var(--danger)]"
+  },
+  info: {
+    border: "border-[var(--info-border)]",
+    fill: "bg-[var(--info-bg)]",
+    title: "[&_[data-slot=card-title]]:text-[var(--info)]"
+  },
+  success: {
+    border: "border-[var(--success-border)]",
+    fill: "bg-[var(--success-bg)]",
+    title: "[&_[data-slot=card-title]]:text-[var(--success)]"
+  }
+};
+const CARD_PADDING = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-4"
+};
+function Card({ className, children, flush, variant = "default", tone, padding, ...rest }) {
+  const toned = tone ? CARD_TONES[tone] : void 0;
+  const bordered = variant !== "inset";
   return /* @__PURE__ */ jsx(
     "div",
     {
+      "data-tone": tone,
       ...rest,
       className: cn(
-        variant === "inset" ? "rounded-md bg-[var(--bg-surface-2)] p-3" : cn(
+        variant === "inset" ? "rounded-md bg-[var(--bg-surface-2)] p-3" : variant === "outline" ? (
+          // No shadow and no `flush`: it sits on a surface that already has both.
+          "rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4"
+        ) : 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"
         ),
+        toned && (bordered ? toned.border : toned.fill),
+        toned?.title,
+        padding && CARD_PADDING[padding],
         className
       ),
       children
@@ -637,7 +879,7 @@ function CardFooter({ className, ...props }) {
     }
   );
 }
-function Spinner({ className, label, ...rest }) {
+function Spinner({ className, label, showLabel, labelPosition = "end", ...rest }) {
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, {
     loading: label ?? void 0
   });
@@ -646,6 +888,23 @@ function Spinner({ className, label, ...rest }) {
     className
   );
   if (label === null) return /* @__PURE__ */ jsx("span", { "aria-hidden": true, ...rest, className: ring });
+  if (showLabel) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        role: "status",
+        ...rest,
+        className: cn(
+          "inline-flex items-center text-sm text-[var(--text-secondary)]",
+          labelPosition === "below" ? "flex-col gap-2 text-center" : "gap-2"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: ring }),
+          /* @__PURE__ */ jsx("span", { children: common.loading })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx("span", { role: "status", ...rest, className: ring, children: /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
     common.loading,
     " "
@@ -663,6 +922,7 @@ function EmptyState({
   headingAs,
   variant = "box",
   tone,
+  size = "md",
   className,
   ...rest
 }) {
@@ -670,17 +930,26 @@ function EmptyState({
   const toneClass = tone ? EMPTY_STATE_TONE[tone] : void 0;
   const hasHint = hint != null && hint !== false && hint !== "";
   if (variant === "inline") {
+    const sm = size === "sm";
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ...rest,
         className: cn(
-          "flex flex-wrap items-center justify-center gap-x-2 gap-y-1 py-4 text-center text-sm text-[var(--text-muted)]",
+          "flex flex-wrap items-center text-[var(--text-muted)]",
+          sm ? "justify-start gap-x-1.5 gap-y-0.5 py-1 text-start text-xs" : "justify-center gap-x-2 gap-y-1 py-4 text-center text-sm",
           className
         ),
         children: [
-          icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("flex text-[var(--text-placeholder)] [&_svg]:size-4", toneClass), children: icon }),
-          /* @__PURE__ */ jsx(Title, { className: cn("text-sm", toneClass), children: title }),
+          icon != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn("flex text-[var(--text-placeholder)]", sm ? "[&_svg]:size-3.5" : "[&_svg]:size-4", toneClass),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx(Title, { className: cn(sm ? "text-xs" : "text-sm", toneClass), children: title }),
           hasHint && /* @__PURE__ */ jsx("span", { className: "text-xs", children: hint }),
           action != null && /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-2", children: action })
         ]