@hraness/design-kit 0.35.0 → 0.35.2

package/src/react/platform-install.tsx

@@ -11,6 +11,7 @@ import {
   platformMark,
   type PlatformId,
 } from "../platforms.js";
+import { SetupCopyButton } from "./setup-copy-button.js";
 import { SyntaxCode } from "./syntax-code.js";
 import { platformInstallClassName as cx } from "./platform-install.stylex.js";
 
@@ -29,7 +30,7 @@ interface PlatformInstallTargetBase {
   readonly label?: string;
   /** Where the command runs, such as "Terminal" or "PowerShell". */
   readonly shell?: string;
-  /** A short qualifier under the command, such as "Apple silicon" or "x86_64 and ARM64, glibc 2.34+". */
+  /** A short qualifier in the primary command footer, such as "Apple silicon" or "Requires Bun 1.3.14+". */
   readonly note?: ReactNode;
   readonly alternatives?: readonly PlatformInstallAlternative[];
 }
@@ -167,22 +168,12 @@ function PlatformMarkUse({ platform, symbolId }: Readonly<{ platform: PlatformId
   );
 }
 
-function CopyGlyph({ copied }: Readonly<{ copied: boolean }>) {
-  return (
-    <svg aria-hidden="true" className={cx(["copyIcon"])} fill="none" focusable="false" stroke="currentColor"
-      strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} viewBox="0 0 24 24">
-      {copied
-        ? <path d="M5 12.5l4.5 4.5L19 7.5" />
-        : <><rect height="12" rx="2" width="12" x="8" y="8" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></>}
-    </svg>
-  );
-}
-
 function CommandBlock({
   caption,
   command,
   copyKey,
   onCopy,
+  note,
   status,
   subject,
 }: Readonly<{
@@ -190,6 +181,7 @@ function CommandBlock({
   command: string;
   copyKey: string;
   onCopy: (key: string, command: string, subject: string, pre: HTMLElement | null) => void;
+  note?: ReactNode;
   status: CopyStatus | null;
   subject: string;
 }>) {
@@ -199,21 +191,20 @@ function CommandBlock({
     <div className={cx(["command"])} data-copy-state={state}>
       <div className={cx(["commandBar", (caption === undefined || caption === "") && "commandBarEmpty"])}>
         <span className={cx(["shell"])}>{caption}</span>
-        <button
-          className={cx(["copy"])}
-          data-copy-state={state}
-          onClick={() => onCopy(copyKey, command, subject, preRef.current)}
-          type="button"
-        >
-          <CopyGlyph copied={state === "copied"} />
-          <span>{state === "copied" ? "Copied" : state === "failed" ? "Select to copy" : "Copy"}</span>
-          <span className={cx(["status"])}> {subject}</span>
-        </button>
+        <SetupCopyButton
+          className="hraness-platform-install__copy"
+          iconClassName="hraness-platform-install__copy-icon"
+          failedLabel="Select to copy"
+          onCopy={() => onCopy(copyKey, command, subject, preRef.current)}
+          state={state}
+          subject={subject}
+        />
       </div>
       {/* Focusable so keyboard users can scroll a long command sideways. */}
       <pre aria-label={subject} className={cx(["pre"])} ref={preRef} tabIndex={0}>
         <SyntaxCode className={cx(["code"])} code={command} language="shell" styles="classes" />
       </pre>
+      {note === undefined ? null : <div className={cx(["note", "commandNote"])}>{note}</div>}
     </div>
   );
 }
@@ -357,6 +348,7 @@ export function PlatformInstall({
                   command={target.command}
                   copyKey={`${target.id}:primary`}
                   onCopy={copy}
+                  note={target.note}
                   status={status}
                   subject={`${name} install command`}
                 />
@@ -377,7 +369,7 @@ export function PlatformInstall({
                   ))}
                 </ul>
               )}
-              {target.note === undefined ? null : <div className={cx(["note"])}>{target.note}</div>}
+              {target.command !== undefined || target.note === undefined ? null : <div className={cx(["note"])}>{target.note}</div>}
             </div>
           </div>
         );

package/src/react/setup-copy-button.stylex.ts

@@ -0,0 +1,39 @@
+import * as stylex from "@stylexjs/stylex";
+
+const ink = "var(--foreground, CanvasText)";
+const surface = "var(--surface, Canvas)";
+const background = "var(--background, Canvas)";
+const forced = "@media (forced-colors: active)";
+
+export const setupCopyButtonStyles = stylex.create({
+  button: {
+    alignItems: "center",
+    appearance: "none",
+    backgroundColor: { default: background, ":hover": surface, [forced]: "ButtonFace" },
+    borderColor: { default: `color-mix(in srgb, ${ink} 15%, transparent)`, [forced]: "ButtonText" },
+    borderRadius: "0.5rem",
+    borderStyle: "solid",
+    borderWidth: "1px",
+    boxSizing: "border-box",
+    color: { default: ink, [forced]: "ButtonText" },
+    cursor: "pointer",
+    display: { default: "inline-flex", "@media (scripting: none)": "none" },
+    flexShrink: 0,
+    fontFamily: "var(--font-text, ui-sans-serif, system-ui, sans-serif)",
+    fontSize: "0.8125rem",
+    fontWeight: 500,
+    gap: "0.4rem",
+    justifyContent: "center",
+    lineHeight: 1,
+    margin: 0,
+    minBlockSize: "2.75rem",
+    outline: { default: "none", ":focus-visible": "2px solid var(--focus, Highlight)" },
+    outlineOffset: "2px",
+    padding: "0.65rem 0.8rem",
+  },
+  icon: { blockSize: "1rem", flexShrink: 0, inlineSize: "1rem" },
+});
+
+export function setupCopyButtonClassName(part: keyof typeof setupCopyButtonStyles, caller?: string): string {
+  return [`hraness-setup-copy__${part}`, stylex.props(setupCopyButtonStyles[part]).className, caller].filter(Boolean).join(" ");
+}

package/src/react/setup-copy-button.tsx

@@ -0,0 +1,20 @@
+import { setupCopyButtonClassName as cx } from "./setup-copy-button.stylex.js";
+
+/** Presentation only: each setup composition retains its clipboard and recovery behavior. */
+export function SetupCopyButton({ className, iconClassName, onCopy, state, subject, failedLabel = "Copy failed" }: Readonly<{
+  className?: string;
+  iconClassName?: string;
+  onCopy: () => void;
+  state: "idle" | "copying" | "copied" | "failed";
+  subject: string;
+  failedLabel?: string;
+}>) {
+  return (
+    <button aria-busy={state === "copying" || undefined} aria-label={`${state === "copied" ? "Copied" : "Copy"} ${subject}`} className={cx("button", className)} data-copy-state={state} disabled={state === "copying"} onClick={onCopy} type="button">
+      <svg aria-hidden="true" className={cx("icon", iconClassName)} fill="none" focusable="false" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} viewBox="0 0 24 24">
+        {state === "copied" ? <path d="M5 12.5l4.5 4.5L19 7.5" /> : <><rect height="12" rx="2" width="12" x="8" y="8" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></>}
+      </svg>
+      <span>{state === "copied" ? "Copied" : state === "copying" ? "Copying" : state === "failed" ? failedLabel : "Copy"}</span>
+    </button>
+  );
+}