ClipboardField allows passing in a secure string

apps/webapp/app/components/primitives/ClipboardField.tsx

@@ -69,7 +69,7 @@ const variations = {
 
 type ClipboardFieldProps = {
   value: string;
-  secure?: boolean;
+  secure?: boolean | string;
   variant: keyof typeof variations;
   className?: string;
   icon?: IconNames | React.ReactNode;
@@ -82,7 +82,7 @@ export function ClipboardField({
   className,
   icon,
 }: ClipboardFieldProps) {
-  const [isSecure, setIsSecure] = useState(secure);
+  const [isSecure, setIsSecure] = useState(secure !== undefined && secure);
   const [copied, setCopied] = useState(false);
 
   const copy = useCallback(
@@ -120,7 +120,13 @@ export function ClipboardField({
       <input
         type="text"
         ref={inputIcon}
-        value={isSecure ? "•".repeat(value.length) : value}
+        value={
+          isSecure
+            ? typeof secure === "string"
+              ? secure
+              : "•".repeat(value.length)
+            : value
+        }
         readOnly={true}
         className={cn("shrink grow select-all overflow-x-auto", input)}
         size={value.length}

apps/webapp/app/components/stories/ClipboardField.stories.tsx

@@ -103,6 +103,62 @@ function ClipboardFieldExample() {
           secure={true}
         />
       </div>
+      <div className="flex flex-col items-start gap-y-8 p-8">
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="primary/small"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="secondary/small"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/small"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/small"
+          icon={<EnvironmentLabel environment={{ type: "STAGING" }} />}
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/small"
+          icon="search"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="primary/medium"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="secondary/medium"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/medium"
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/medium"
+          icon={<EnvironmentLabel environment={{ type: "PRODUCTION" }} />}
+          secure="npx ••••••••"
+        />
+        <ClipboardField
+          value="npx abcdefghi"
+          variant="tertiary/medium"
+          icon="search"
+          secure="npx ••••••••"
+        />
+      </div>
     </div>
   );
 }