Input

<div className="flex flex-col gap-5 max-w-sm w-full">
  <Input
    label="OPERATOR IDENTIFIER"
    placeholder="e.g. AGENT-404"
    helperText="Assigned system credentials required for neural sync"
  />
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
  <Input variant="neon" label="Neon Cyber Glow" placeholder="Listening on 0.0.0.0:8080..." leftIcon={<Terminal className="w-4 h-4 text-cyan-400" />} />
  <Input variant="glass" label="Frosted Glass" placeholder="Encrypted string..." leftIcon={<Lock className="w-4 h-4 text-slate-400" />} />
  <Input variant="default" label="Standard Neutral" placeholder="User alias..." />
  <Input variant="ghost" label="Ghost Minimal" placeholder="Search telemetry records..." leftIcon={<Search className="w-4 h-4 text-slate-400" />} />
</div>

<div className="flex flex-col gap-5 max-w-lg w-full">
  <Input
    leftAddon="https://"
    rightAddon=".cyber.io"
    placeholder="quantum-gateway"
    label="Node Endpoint URL"
  />

  <Input
    leftIcon={<Search className="w-4 h-4 text-cyan-400" />}
    clearable
    value={query}
    onChange={(e) => setQuery(e.target.value)}
    onClear={() => setQuery('')}
    label="Clearable Query Filter"
    placeholder="Search active clusters..."
  />
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
  <Input
    label="Firewall Access Key"
    error="INVALID_HASH: Cryptographic checksum mismatch"
    defaultValue="0x9481FA_UNVERIFIED"
    leftIcon={<Key className="w-4 h-4 text-rose-400" />}
  />

  <Input
    label="Subnet Whitelist"
    success
    defaultValue="192.168.1.0/24"
    helperText="Verified subnet route established"
    leftIcon={<ShieldCheck className="w-4 h-4 text-emerald-400" />}
    rightIcon={<CheckCircle className="w-4 h-4 text-emerald-400" />}
  />

  <Input
    label="Quantum Key Handshake"
    isLoading
    defaultValue="Negotiating Diffie-Hellman entropy..."
  />

  <Input
    label="Decommissioned Port"
    disabled
    defaultValue="PORT_443_OFFLINE"
    helperText="Device currently quarantined"
  />
</div>

<div className="flex flex-col gap-4 max-w-md w-full">
  <Input inputSize="sm" placeholder="Compact input (sm - 32px)..." leftIcon={<Search className="w-3.5 h-3.5" />} />
  <Input inputSize="md" placeholder="Standard input (md - 40px)..." leftIcon={<Search className="w-4 h-4" />} />
  <Input inputSize="lg" placeholder="Hero input (lg - 48px)..." leftIcon={<Search className="w-5 h-5 text-cyan-400" />} />
</div>

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-6">
    <div className="flex items-center justify-between pb-4 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Zap className="h-4 w-4 text-cyan-400 animate-pulse" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">NEURAL UPLINK GATE</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">STANDBY</Badge>
    </div>

    <div className="space-y-4">
      <Input
        variant="glass"
        label="Cyber Identity"
        placeholder="operator@siber.corp"
        leftIcon={<Globe className="w-4 h-4 text-slate-400" />}
      />

      <Input
        variant="glass"
        type="password"
        label="Quantum Passcode"
        placeholder="••••••••••••"
        leftIcon={<Lock className="w-4 h-4 text-slate-400" />}
        rightIcon={<Eye className="w-4 h-4 text-slate-400 cursor-pointer hover:text-white" />}
      />
    </div>

    <Button variant="neon" glow className="w-full">
      AUTHENTICATE NODE
    </Button>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">TARGET NODE ROUTER</CardTitle>
      <Badge variant="neon" size="sm">ROUTING ACTIVE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Configure proxy tunnel credentials for secure cluster transport.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <Input
      variant="neon"
      label="Cluster Host IP"
      defaultValue="10.240.88.192"
      leftIcon={<Hash className="w-4 h-4 text-cyan-400" />}
    />

    <Input
      variant="neon"
      label="Tunnel Port"
      defaultValue="9443"
      leftIcon={<Terminal className="w-4 h-4 text-cyan-400" />}
    />

    <div className="pt-2 flex justify-end gap-3">
      <Button variant="secondary" size="sm">RESET</Button>
      <Button variant="neon" size="sm" glow>DEPLOY TUNNEL</Button>
    </div>
  </CardContent>
</Card>