52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T13d4,'use client'; import { Check, Copy, Eye, EyeOff } from 'lucide-react'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { Input, type InputProps } from '@/components/ui/input'; import { useLabels } from '@/components/ui/labels-context'; // Bullets shown between the visible ends. Fixed so the masked text does not reveal the secret length. const MASK_BULLETS = 8; const COPIED_RESET_MS = 2000; export interface SecretFieldProps extends Omit { // The real value. It is only rendered into the field while revealed, and it is what the copy button copies. value: string; // Characters kept visible at the start and the end while masked. Short values are masked completely. Default 4. visibleChars?: number; // Controlled reveal state. Uncontrolled via `defaultRevealed`. revealed?: boolean; defaultRevealed?: boolean; onRevealedChange?: (revealed: boolean) => void; // Hides the reveal toggle or the copy button. revealable?: boolean; copyable?: boolean; // Called with the real value after it was copied. onValueCopied?: (value: string) => void; // Accessible names of the buttons. Win over the provider text. showLabel?: string; hideLabel?: string; copyLabel?: string; copiedLabel?: string; } // Partially masks a secret, e.g. `sk_l••••••••3f9a`. Values too short to keep both ends are masked completely. function maskSecret(value: string, visibleChars: number) { if (value.length <= visibleChars * 2 + MASK_BULLETS / 2) return '•'.repeat(Math.min(Math.max(value.length, 1), MASK_BULLETS)); return `${value.slice(0, visibleChars)}${'•'.repeat(MASK_BULLETS)}${value.slice(-visibleChars)}`; } // Read-only field for API keys and private URLs: partially masked, reveal toggle and a copy button that always copies the real value. const SecretField = React.forwardRef( ( { value, visibleChars = 4, revealed: revealedProp, defaultRevealed = false, onRevealedChange, revealable = true, copyable = true, onValueCopied, showLabel, hideLabel, copyLabel, copiedLabel, disabled, inputClassName, ...props }, ref, ) => { const l = useLabels({ showSecret: showLabel, hideSecret: hideLabel, copyValue: copyLabel, copied: copiedLabel }); const [innerRevealed, setInnerRevealed] = React.useState(defaultRevealed); const revealed = revealedProp ?? innerRevealed; const [copied, setCopied] = React.useState(false); const timer = React.useRef>(); React.useEffect(() => () => clearTimeout(timer.current), []); const toggle = () => { if (revealedProp === undefined) setInnerRevealed(!revealed); onRevealedChange?.(!revealed); }; const copy = async () => { try { await navigator.clipboard?.writeText(value); } catch { return; } onValueCopied?.(value); setCopied(true); clearTimeout(timer.current); timer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS); }; const actions = (revealable ? 1 : 0) + (copyable ? 1 : 0); const iconClass = 'h-icon-xs w-icon-xs'; return ( <> 0 ? ( <> {revealable ? ( ) : null} {copyable ? ( ) : null} ) : undefined } {...props} /> {copied ? l.copied : ''} ); }, ); SecretField.displayName = 'SecretField'; export { maskSecret, SecretField }; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react@^0.379.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^0.379.0"}]]}]}]]}],["$","$L52",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/button.json","https://zero-design.itdone.de/r/input.json","https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/secret-field.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]