feat(design): glass surfaces by role, the static Badge, LinkButton, user pickers on the Combobox (E28 S3d1)

2026-09-25 00:34:35 +02:00
parent db10bfbbca
commit c47c193ad1
89 changed files with 818 additions and 478 deletions
@@ -0,0 +1,72 @@
+import clsx from "clsx";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import {
+  buttonClass,
+  iconButtonClass,
+  type ButtonSize,
+  type ButtonVariant,
+  type IconButtonSize,
+  type IconButtonVariant,
+} from "./buttonStyles";
+
+// A link that looks like a button (a download, a sign-in that leaves the app). It stays an <a> — the
+// browser's own open-in-new-tab, copy-link and download behaviour, and the right role for a screen
+// reader — and wears the `Button` / `IconButton` face from buttonStyles, so it can't drift from the
+// buttons beside it. A link in a sentence is a plain `<a>` (or `Button variant="link"` for an action).
+
+type Anchor = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "className" | "children">;
+
+export function LinkButton({
+  variant = "outline",
+  size = "md",
+  icon,
+  fullWidth,
+  className,
+  children,
+  ...rest
+}: Anchor & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** Leading icon (a lucide element; sized here). */
+  icon?: ReactNode;
+  fullWidth?: boolean;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <a
+      className={clsx(buttonClass({ variant, size, fullWidth, element: "link" }), className)}
+      {...rest}
+    >
+      {icon}
+      {children}
+    </a>
+  );
+}
+
+/** The glyph-only form: `label` is the accessible name and the tooltip, as on `IconButton`. */
+export function IconLink({
+  label,
+  variant = "ghost",
+  size = "sm",
+  className,
+  children,
+  ...rest
+}: Anchor & {
+  label: string;
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <a
+      aria-label={label}
+      title={label}
+      className={clsx(iconButtonClass({ variant, size, element: "link" }), className)}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}